v-model 的奇怪更新问题答案

【问题标题】：Weird update issue with v-modelv-model 的奇怪更新问题
【发布时间】：2018-07-23 13:33:04
【问题描述】：

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

首先，我用languages 检索一个数组。然后我将使用一个 foreach 函数为每个孩子添加一个名为 er 的新属性。我会将结果设置为一个数组，用于显示输入字段。

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 属性但属性不同的内容时，值会更新。有什么我没看到的吗？

【问题讨论】：

MDN Array.prototype.map()：map() 方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。您不会将通过 map 方法创建的数组存储在任何地方，因此实际上 map 在您的代码中没有任何作用。

标签： javascript vue.js vuejs2 v-model

【解决方案1】：

在深入阅读 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;
},

【讨论】：

【解决方案2】：

我发现这个问题与深度反应有关。

如果你分配数据而不是

this.language = 数据；

到

this.language = Object.assign({}, this.language , data)

更详细地检查此链接

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

【讨论】：