javascript - v-model 的奇怪更新问题

Question

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

首先，我检索了一个包含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 属性但不是同一属性的内容时，值会更新。有什么我没看到的吗？

Answer 1

在深入研究 Vue API 文档后，我遇到了这个小 friend :

this.$set

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

“向响应式对象添加一个属性，确保新属性也是响应式的，从而触发 View 更新。”

新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;
},