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.set (object, key, value) 메서드를 사용하여 중첩 된 객체에 반응성 속성을 추가 할 수 있습니다.

일반적으로 어떻게 작동해야하는지는 잘 알고 있지만 실제로 어떻게해야할지 모르겠다. 내 구성 요소 내부.

특히 올바른 티켓 개체와 메서드에 대한 입력 값을 모두 전달하려면 어떻게해야합니까? 티켓을 통해 내 템플릿 내가 루프에서

:

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

을하지만 이렇게하면, 어떻게 내가 특정 티켓을 액세스합니까 :

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

이 요소 값을 얻으려면,이 작업을 수행 할 수 있습니다 목적?

또한, 나는 티켓 인스턴스 통과 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