Updating a value in a data array upon deselecting a checkbox

Change this line:

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

And in ur vue instance add method like this:

new Vue({
        el: '#app',

        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 }
            ]
        },
        
        methods: {
            makeZero: function(grocery) {
            grocery.number = 0;
          }
        }

    });

Thanks, awesome, I was just about to reply that I figured it out and wanted to ask if it was good what I did.. I had to do this:

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

        methods: {

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

Because if I selected a checkbox, then deselected it again, it was still selected, so I had to add the task.selected = 0. Or am I missing something there?