How to bind such data in vue?

Question

Vue.js

There is a component:

I use vuex, only an array of Title strings is sent from the server to the store.
How can I tie all this so that it flies to the server, as well as an array of title strings that have been selected, and when it arrives from the server, somehow tie it to the component.

Answer 1

You make one more calculated property - an array of selected elements. The getter gets the corresponding array from the store, the setter causes a mutation. Use this property in v-modelcheckboxes. You rewrite the computed property that controls the selection of all checkboxes as follows: in the getter you compare the lengths of the arrays of all elements and the selected ones, in the setter you set the value of the computed property of the selected elements. For example.

Answer 2

If I correctly caught the essence of the issue, then the solution, as always, is in the documentation ) here is an example

<input type="checkbox" id="jack" value="Джек" v-model="checkedNames">
<label for="jack">Джек</label>
<input type="checkbox" id="john" value="Джон" v-model="checkedNames">
<label for="john">Джон</label>
<input type="checkbox" id="mike" value="Майк" v-model="checkedNames">
<label for="mike">Майк</label>
<br>
<span>Отмеченные имена: {{ checkedNames }}</span>

That is, you bind the checkbox to an array that will store the value of the checked checkboxes. And there is no need to make a crutch with id and isCheked