Странная проблема обновления с v-моделью

Я работаю над динамическими полями ввода. На основе записей в массиве я хотел бы создать текстовое поле с соответствующим атрибутом 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-модели того же объекта, но не с тем же свойством, значение обновляется. Есть что-то, чего я не вижу?


javascript vue.js vuejs2 v-model
person Giesburts    schedule 23.07.2018    source источник
comment
MDN Array.prototype.map(): метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве. вы нигде не храните массив, созданный из метода map, поэтому на самом деле карта ничего не делает в вашем коде.   -  person Armin Ayari    schedule 23.07.2018

Ответы (2)


arrow_upward
2
arrow_downward

После погружения в документы 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;
},
person Giesburts    schedule 23.07.2018

arrow_upward
-1
arrow_downward

Я вижу, что эта проблема связана с реактивностью в глубине.

если вы назначаете данные вместо

this.language = данные;

to

this.language = Object.assign({}, this.language, данные)

проверьте эту ссылку более подробно

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

person Himanshu sharma    schedule 23.07.2018