在Vue 2.0中添加对象属性

时间:2016-11-11 18:37:27

标签: vue.js vue-component

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

我有一系列票据正在传递到我的页面中:

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

但是如果我这样做,我该如何访问特定的故障单对象?

或者,我可以通过票证实例:

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

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

但如果我这样做,我该如何访问数量?

1 个答案:

答案 0 :(得分: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