1

我正在研究某种动态输入字段。基于数组中的条目，我想生成一个具有相应v-model属性的文本区域。出于某种原因，v-model只有当我在另一个输入字段中输入内容时，get 的值才会更新。

所以首先，我用languages. 然后我将使用一个 foreach 函数为每个名为er. 我将结果设置为一个数组，用于显示输入字段。

JS

getLanguages() {
    const headers = this.headers;
    axios.get(`${this.$API_URL}/api/v1/settings/languages`, { headers }).then(response => {
        const { data } = response.data;
        this.languages = data;
        this.setQuestions();
    });
},

setQuestions() {
    const languages = this.languages;
    const questions = this.question.questions;

    languages.forEach(item => questions.push(item));

    questions.map(item => {
        item.er = null;
        return item;
    });

    this.question.questions = questions;

    this.loaded = true;
},

HTML

<div class="form-group row" v-for="option in question.questions" :key="option.id">
    <label for="question_name" class="col-sm-2 col-form-label label">{{ t('Question') }} {{ option.name }} </label>
    <div class="col-sm-10">
        <textarea  id="question_name" v-model="option.er" required></textarea>
        {{ option.er }}
    </div>
</div>

所以我遇到的主要问题是该属性er与输入字段不同步。当我在另一个输入中输入具有相同对象的 v-model 属性但属性不同的内容时，值会更新。有什么我没有看到的吗？

4

2 回答 2

2

在深入了解 Vue API 文档后，我遇到了这个小朋友：

this.$set

https://vuejs.org/v2/api/#Vue-set

“将属性添加到反应性对象，确保新属性也是反应性的，因此会触发视图更新。”

新JS

setQuestions() {
    const languages = this.languages;
    const questions = this.question.questions;

    languages.forEach(item => questions.push(item));

    questions.map(item => {
        this.$set(item, 'er', null);
    });

    this.question.questions = questions;

    this.loaded = true;
},
于 2018-07-23T13:51:56.057 回答
-1

我看到这个问题与深度反应有关。

如果您分配数据而不是

this.language = 数据；

至

this.language = Object.assign({}, this.language , 数据)

更详细地检查这个链接

https://vuejs.org/v2/guide/reactivity.html

于 2018-07-23T13:53:07.173 回答