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.

Please frame your explanation a little better. It doesnt make a lot of sense. — MJ9094
Both checkboxes (left and right) must use the same :value and handle the @input event to update the Vuex store. — IVO GELOV
keep in mind that left and right checkboxes are binds to a list — Amin Soraya
When some checkboxes are checked then the sidebar was affected otherwise the related checked checkboxes controls were unchecked. tnx for the best solution. — Amin Soraya

Amin Soraya Amin Soraya · Accepted Answer · 2021-01-08T07:12:13

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

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

1 Answers