Как на vue связать такие данные?

Question

[Denioo]

Есть компонент:

Использую vuex, с сервера в стор прилеают данные только массив строк Title.
Как можно это все прикрутить чтобы на сервер улетал, так же массив строк title, которые были выбраны, а когда прилетает с свервера то это как-нибудь прикрутить к компоненту.

Answer 1

[0xD34F]

Делаете ещё одно вычисляемое свойство - массив выбранных элементов. Геттер достаёт соответствующий массив из стора, сеттер вызывает мутацию. Используете это свойство в v-model чекбоксов. Вычисляемое свойство, управляющее выбором всех чекбоксов, переписываете следующим образом: в геттере сравниваете длины массивов всех элементов и выбранных, в сеттере устанавливаете значение вычисляемого свойства выбранных элементов. Например.

Answer 2

[Demonstr66]

Если я правильно уловил суть вопроса, то решение как всегда в документации) вот пример

<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>

То есть привязываешь чекбокс к массиву который и будет хранить value отмеченных чекбоксов. И не надо городить костыль с id и isCheked

Comments

[Denioo]

а как тогда привязать логику которая есть сейчас? Вот это немного не представляю, сейчас она опирается на isCheked, и есть главный чекбокс

[Demonstr66]

Denioo, ниже, 0xD34F, привел пример реализации. Будет массив в котором будут храниться title`ы которые выбраны. Узнать выбран какой то конкретный элемент, можно поискав его в масииве который привязан к инпутам