在Vue.js的第2版中，添加到列表中的项目是非反应性的

Question

在Vue 1.0中，我过去只需调用items.push({})就可以将项添加到v-for中使用的数组中，如下所示：

http://jsbin.com/figiluteni/1/edit?html，js，输出

Vue 2.0中完全相同的代码向数组插入一个非反应对象：

http://jsbin.com/zuwihahiwa/1/edit?html，js，输出

(请注意，新添加的项目在编辑时不会实时更新(

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

我知道Vue在初始化时会在数组上插入挂钩，但作为一个创建新项"name"属性的Vue模型绑定，我认为它可以像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>

我的问题是：有没有一种推荐的添加元素的方法，而不必保留一个空元素的原型？

Answer 1

更改与反应性系统更改无关，而是v-model在2.0中的工作方式：它不再神奇地创建不存在的路径，并使它们对您具有反应性。

此更改旨在迫使您考虑数据形状，并使应用程序状态更加可预测，类似于您在组件的data选项中声明反应属性的方式。

如果我是你，我会创建一个方法，只做this.items.push({ id: null, name: '' })。没有必要克隆它。

Answer 2

根据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)"