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文档之后，我遇到了这个小朋友：

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

Answer 2

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

如果您分配数据而不是

this.language =数据;

到

this.language = Object.assign（{}，this.language，data）

更详细地检查此链接

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

v模型的奇怪更新问题

2 个答案: