Hinzufügen Objekteigenschaft in Vue 2.0

Question

Ich erstelle einen einfachen Einkaufswagen, in dem der Benutzer eine Menge des Artikels hinzufügen konnte, die sie in ihren Warenkorb hinzufügen möchten.

Ich habe eine Reihe von Karten, die ich in meiner Seite bin vorbei:

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

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

Die allgemeine Idee ist, dass ich einen Eingang für Benutzer, die Menge, die sie wollen, um anzuzeigen, bieten würde zu kaufen. Bei Änderung der Eingabe würde dem Ticketobjekt eine neue "Quantity" -Eigenschaft hinzugefügt.

Ich habe die Dokumente lesen und erkennen, dass:

Vue nicht dynamisch neu Hinzufügen von Stammebene reaktiven Eigenschaften auf eine bereits erstellte Instanz zulässt. Allerdings ist es möglich, reaktive Eigenschaften zu einem verschachtelten Objekt hinzufügen, um die Vue.set mit (Objekt, Schlüssel, Wert) Methode

ich in der Regel zu verstehen, wie das funktionieren soll, aber ich weiß nicht, wie man es wirklich tun innerhalb meiner Komponente.

Wie gebe ich sowohl das korrekte Ticketobjekt als auch den Wert der Eingabe an eine Methode weiter?

In meiner Vorlage I Schleife durch Karten:

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

den Elementwert zu erhalten, kann ich dies tun:

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

Aber wenn ich das tue, wie greife ich auf das spezifische Ticket Objekt?

Alternativ coould ich die Ticket-Instanz übergeben:

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

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

Aber wenn ich das tue, wie greife ich auf die Menge?

Answer 1

Verwenden Sie spezielle $event Variable

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

Dokumentation Link: https://vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers