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

    }

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