Как правильно хранить и показывать отмеченные сущности во vueJS 2?

Question

[Evgenii Borovoi]

Есть список языков (длинный).
[{id: 1,name:'English' }
...
]
Надо отмечать какие человек знает и сохранять на сервере. Можно хранить непосредственно в массиве, но тогда каждый раз при нажатии будет идти перебор всего массива. Умные люди посоветовали сделать отдельный set только с id и проверять по через has(). Но, как я понял, VueJS не отслеживает изменения в сетах и не перерисовывает.

Собственно какое оптимальное решение будет, с учетом того, что надо отрисовывать отмеченные языки?

<div class="list-group-item p-0 pt-2"
                             v-for="(lang, index) in langsArr"
                             @click.prevent="clickLang(lang.id)"

                        >&nbsp;
                            <label>
                                <input type="checkbox">
                                <span class="list-group-item-text"><i class="fa fa-fw"></i>@{{lang.name}}</span>
                                <span
                                    v-if="isIssetLang(lang.id)"
                                > Отмечен  </span>
                            </label>
                        </div>

...

                isIssetLang(id) {
                    return this.chosenLangs.has(id);

                },

Answer 1

[Aetae]

Также как раньше жили, без этих ваших новомодных Set\Map:

chosenLangs: {},

clickLang(id) {
  return this.isIssetLang(id) 
    ? this.$delete(this.chosenLangs, id) 
    : this.$set(this.chosenLangs, id, true);
},

isIssetLang(id) {
  return id in this.chosenLangs;
},

Comments

[Evgenii Borovoi]

Спасибо!