Vue.js Wert auf Abwahl eine Checkbox

Question

Schauen Sie sich meine Geige Aktualisierung:

https://jsfiddle.net/jqumt5oy/

Ich bin ein einfaches Array mit meiner Tabelle füllen:

data: { 
     groceries: [ 
      { description: 'Chicken', price: 1, number: 4, selected: true }, 
      { description: 'Beef', price: 2, number: 0, selected: false }, 
      { description: 'Beer', price: 3, number: 2, selected: true }, 
      { description: 'Milk', price: 4, number: 0, selected: false } 
     ] 
    }, 

Wie würde ich aktualisieren die Nummer einer Zeile auf Null, wenn Sie ein Kontrollkästchen deaktivieren? Wenn ich also etwas aus meiner Liste herauslassen möchte, muss ich es nur abwählen, anstatt zuerst die Nummer manuell auf 0 zu aktualisieren?

Ich gehe davon aus, dass ich dafür eine Funktion benötige, oder kann es einfacher gemacht werden, indem ein anderes V-Modell zum Beispiel an das Auswahlmenü gebunden wird?

Answer 1

Fest es ein Verfahren unter Verwendung von:

<input type="checkbox" v-model="grocery.selected" @click="selectNumber(grocery)"> 

    methods: { 

     selectNumber: function(grocery) { 
      if(grocery.selected == true) 
      { 
       grocery.number = 0; 
       grocery.selected = 0; 
      } 
     } 

    } 

Wenn jemand eine bessere Lösung hat, wenden Sie sich bitte ein, um zu Posten.