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; 
      } 
     } 

    } 

如果任何人有更好的解决方案，请随意张贴之一。