Как я могу выводить цену из этой формы?

Question

[Daksin]

Добрый день, столкнулся с проблемой, что не знаю как могу вывести окончательную цену из этих чекбоксов, то есть если чекбокс выбранный, то к цене добавляется определенное значение. Как я могу это всё организовать используя vue?

Answer 1

[0xD34F]

data: () => ({
  items: [
    { text: '...', price: ..., checked: false },
    { text: '...', price: ..., checked: false },
    ...
  ],
}),
computed: {
  sum() {
    return this.items.reduce((acc, n) => acc + n.price * n.checked, 0);
  },
},

<div v-for="n in items">
  <label>
    <input v-model="n.checked" type="checkbox">
    {{ n.text }}
  </label>
</div>
<div>SUM: {{ sum }}</div>

Comments

[Daksin]

Спасибо огромное!