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（オブジェクト、キー、値）メソッド

を使用して、ネストされたオブジェクトに反応するプロパティを追加することが可能です私は一般的にそれがどのように動作するかを理解し、私は実際にどのように行うのか分かりません私のコンポーネントの内側にあります。

具体的には、正しいチケットオブジェクトとメソッドの入力値の両方を渡すにはどうすればよいですか？

チケットを通して私のテンプレートIループで

：

<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