vue.js - The best way of Two-way data binding using vuex in a list

Question

I have a list of items in a Vuex state. According to the image when I checked items the main state would be updated using v-on:change and too in the sidebar but when I toggle down using v-on:change (side bar) the Vuex state changes but the checkbox has value!!! how to handle it using two-way data binding in such a scenario?

best regards.

Answer 1

I have the main list in the whole of programs with contains such items:

{id:1,text:'a',checked:false}

this scenario :

the Search component shows pure of list items either checked or not checked. the Side Component shows the items checked properly and then click the close button it should disappear and uncheck items simultaneously.

so Search Component bind to the list by :

<input type="checkbox" :value="item.checked" v-model="$store.state.sideBarItems[index].checked">

so my answer is [index].checked which make a proper two-way data binding.

tnx to this post which gives me an idea