Vue.js - v-модель не отслеживает изменения с динамическими данными?

Question

У меня есть следующая форма, где поля ввода генерируются динамически, однако, когда я обновляю поля, двухстороннее связывание не происходит - ничего не меняется при просмотре результатов в инструментах разработчика?

   <template v-for="field in formFields" :key="field.name">
        <div class="form-group" v-if="field.type == text'">
            <label class="h4" :for="field.label" v-text="field.label"></label>
            <span class="required-asterisk" v-if="field.required"> *</span>
                   <input :class="field.className"
                          :id="field.name"
                          :name="field.name"
                          type="text"
                          :maxlength="!!field.maxLength ? field.maxLength : false"
                          v-validate="{ required: field.required}"
                          :data-vv-as="field.label" 
                          v-model="form[field.name]"/>
           <span class="field-validation-error" v-show="errors.has(field.name)" v-text="errors.first(field.name)"></span>
         </div>
   </template>

И следующий экземпляр vue:

export default {

   props: ['formFields'],

   data: function () {

       return {
          form: {},
       }
   },

   created: function() {
        this.resetForm();
   },

   methods: {

     resetForm: function() {

            this.form = {
                'loading': false
            }

            _.each(this.formFields,  (field) => {
                this.form[field.name] = field.value;
            });

           $('#editModal').modal('hide');

           this.errors.clear();
     }
  }
}

Когда я жестко кодирую значения в form, это похоже на работу:

 this.form = {
                'loading': false,
                'Subject': 'Test',
                'Author': 'Roald Dahl'
            }

Так что похоже на что-то со следующим, что ему не нравится:

  _.each(this.formFields,  (field) => {
                this.form[field.name] = field.value;
  });

Может быть, это связано с функцией стрелки. Есть идеи, парни?

Answer 1

Вы сталкиваетесь с ограничением реактивности Vue, которое прописано в документации

Вместо

this.form[field.name] = field.value;

используйте

this.$set(this.form, field.name, field.value);

Answer 2

Вместо

this.form[field.name] = field.value;

используйте

this.$set(this.form, field.name, field.value);

this.form.splice(field.name, 1, field.value)

или

Vue.set(this.form, field.name, field.value);

this.form.splice(field.name, 1, field.value)

Дополнительная информация: https://vuejs.org/v2/guide/list.html#Caveats

Answer 3

Попытка изменить следующее:

<div class="form-group" v-if="field.type 'text'"> -> <div class="form-group" v-if="field.type == 'text'">

и объект данных модели вот так

data: {
          form: {},
   },

https://jsfiddle.net/Jubels/eywraw8t/373132/ Пример здесь. В целях тестирования я удалил проверку