在Vue 2.0中添加对象属性

Question

我正在创建一个简单的购物车，用户可以在其中添加一些他们希望添加到购物车的物品。

我有我传递到我的网页票的数组：

"tickets":[ 
    { 
    "id":1, 
    "title":"cheap", 
    "price":"5.00" 
    }, 
    { 
    "id":2, 
    "title":"VIP", 
    "price":"19.99", 

    }, 
    { 
    "id":3, 
    "title":"General", 
    "price":"9.99" 
    } 
] 

总的想法是，我会为用户提供指示他们要购买的数量的输入。在改变输入时，新的“数量”属性将被添加到票据对象。

我已阅读文档和意识到：

Vue公司不会动态允许添加新的根级别的反应特性，以一个已经创建的实例。但是，可以使用Vue.set（object，key，value）方法向嵌套对象添加反应性属性

我通常理解这应该如何工作，但我不知道如何实际做到这一点在我的组件内部。

具体而言，如何将正确的票据对象和输入值传递给方法？

在我的模板我遍历门票：

<tr v-for="ticket in tickets"> 
    <td>{{ticket.title}}</td><td><input id="quantity" @change="update"</td> 
</tr> 

要获得元素值，我可以这样做：

//script 
update: function(e){ 
quantity = e.target.value 
} 

但如果我这样做，我怎么访问特定的票目的？

另外，我coould通票实例：

<td>{{ticket.title}}</td><td><input id="quantity" @change="update(ticket)"></td> 

//script 
update: function(ticket){ 
//access ticket object... 
} 

但如果我这样做，我怎么访问量？

Answer 1

使用特殊$event变量

<tr v-for="ticket in tickets"> 
    <td>{{ticket.title}}</td><td><input id="quantity" @change="update(ticket, $event)"</td> 
</tr> 

文档链接：https://vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers