Vue.js在取消複選框

Question

看看我的小提琴來更新值：

https://jsfiddle.net/jqumt5oy/

我用一個簡單的數組來填充我的表：

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 } 
     ] 
    }, 

如何將更新當取消選擇複選框時，行的數量爲零？因此，當我想從列表中刪除某些內容時，我只需要取消選擇它，而不是先手動將該數字更新爲0。

我想我會爲此需要一個函數，或者可以通過將另一個v-模型綁定到選擇菜單來使它更容易完成，例如？

Answer 1

使用方法固定它：

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

    methods: { 

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

    } 

如果任何人有更好的解決方案，請隨意張貼之一。