[Vuejs]-Uncheck all checkboxes from child component Vue.js

0👍

When your v-for renders in the parent component, all the rendered filter.items are bound to the same checkedItem v-model.

To correct this, you would need to do something like this:

<div class="filter-checkbox" v-for="(item, index) in filter.items">
    <checkbox :item="item" v-model="item[index]> {{ item }} </checkbox>
</div>

To address your other issue, updating the child component list is as easy as updating filter.items.

You don’t even need a watcher if you dont want to use one. Here is an alternative:

<input v-model.number="valueFrom" @keypress="updateFilterItems()">

And then:

methods: {
    updateFilterItems () {
        // Use map() or loop through the items
        // and uncheck them all.
    }
}

Always ask yourself twice if watch is necessary. It can create complexity unnecessarily.

Leave a comment