Javascript Vue.js在取消选中复选框时更新值

看看我的小提琴：

我正在使用一个简单的数组填充我的表：

    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型绑定到选择菜单（例如）来更轻松地实现吗？

使用以下方法修复了它：

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

    methods: {

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

    }

方法：{
selectNumber:功能（杂货店）{
如果（screery.selected==true）
{
0.number=0；
0.selected=0；
}
}
}

如果有人有更好的解决方案，请随时发布