storm184
@storm184
изучаю vue

Как вывести из массива заголовки title отмеченные checkbox'ом?

Подскажите как вывести только отмеченные чекбоксом заголовки title массива?

Песочница здесь
  • Вопрос задан
  • 172 просмотра
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Делаете ещё одно вычисляемое свойство, по аналогии с sum - массив title'ов отмеченных элементов:

selectedServices() {
  return this.services.reduce((acc, n) => (n.checked && acc.push(n.title), acc), []);
},

Ну и выводите его:

<ul>
  <li v-for="n in selectedServices">{{ n }}</li>
</ul>

UPD. А вообще, имеет смысл немного всё переписать, чтобы не обходить массив services полностью дважды (или трижды, четырежды - кто знает, что ещё потребуется делать с выбранными элементами в будущем). Сделаем selectedServices массивом не title'ов, а самих выбранных элементов:

selectedServices() {
  return this.services.filter(n => n.checked);
},

Рендеринг title'ов, соответственно, станет выглядеть так:

<ul>
  <li v-for="n in selectedServices">{{ n.title }}</li>
</ul>

И используем selectedServices для вычисления суммы, здесь трогать свойство checked больше не надо:

sum() {
  return this.selectedServices.reduce((acc, n) => acc + n.cost, 0);
},
Ответ написан
coderisimo
@coderisimo
уот так уот!

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы