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

    }

如果有人有更好的解決方案，請隨時發布。