Блог

В Vue 1.0 я добавлял элементы в массив, используемый в v-for, просто вызывая items.push({}) , как вы можете видеть здесь:

http://jsbin.com/figiluteni/1/edit?html ,js, вывод

Точно такой же код в Vue 2.0 вставляет нереактивный объект в массив:

http://jsbin.com/zuwihahiwa/1/edit?html,js,output

(Обратите внимание, что вновь добавленные элементы не обновляются в реальном времени при редактировании)

     <button @click="items.push({})">Add item</button>
  

Я знаю, что Vue вставляет хуки в массивы при инициализации, но, будучи привязкой модели Vue, которая создает свойство нового элемента «name», я подумал, что его можно автоматически подключить, как в Vue 1.

Я нахожу это новое поведение очень неудобным, поскольку оно заставляет меня добавлять прототип объекта, который я хочу добавить в данные Vue, и клонировать его:

http://jsbin.com/bamasobuti/1/edit?html ,js, вывод

В данных Vue:

     item_prototype: {id: null, name: ""} 
  

В шаблоне:

     <button @click="items.push(_.clone(item_prototype))">Add item</button>
  

Мой вопрос: есть ли рекомендуемый способ добавления элементов без необходимости сохранять прототип пустого элемента?

Изменение не связано с изменением системы реактивности, а скорее с тем, как v-model работает в версии 2.0: он больше не создает волшебным образом несуществующие пути и не делает их реактивными для вас.

Это изменение предназначено для того, чтобы заставить вас задуматься о форме ваших данных и сделать состояние вашего приложения более предсказуемым, подобно тому, как вы должны объявлять реактивные свойства в data опции вашего компонента.

На вашем месте я бы создал метод и просто сделал this.items.push({ id: null, name: '' }) . Нет необходимости его клонировать.

Согласно документации Vue, v-model="item.prop" это просто синтаксический сахар для:

v-bind:value="item.prop" v-on:input="item.prop = $event.target.value" .

Чтобы заставить его работать, просто прекратите использовать v-model="item.prop" и используйте это вместо:

:value="item.prop" @input="$set(item,'prop',$event.target.value)"