在 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"
  }
]

总体思路是，我会为用户提供一个输入，以表明他们想要购买的数量。输入更改后，新的 "quantity" 属性将添加到票证对象。

我已阅读文档并意识到：

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method

我大体上理解它应该如何工作，但我不知道如何在我的组件内部实际执行它。

具体来说，如何将正确的工单对象和输入值传递给方法？

在我的模板中循环票证：

<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
}

但是如果我这样做，我该如何访问特定的工单对象？

或者，我可以传递票证实例：

<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>

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

在 Vue 2.0 中添加对象属性

Add object property in Vue 2.0

vue.js

vue-component

在 Vue 2.0 中添加对象 属性

Add object property in Vue 2.0

vue.js

vue-component

在 Vue 2.0 中添加对象属性