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.
Source:stackexchange.com