Как сделать простой калькулятор с чекбоксами на Vue.js?

Question

[Anton8989]

Добрый день, имеется не большой калькулятор с чекбоксами на jquery, можете помочь сделать тоже самое только на vue.js. Прилагаю код

<input type="checkbox" value="3.99" id="one" checked>
<input type="checkbox" value="5.99" id="two">
<input type="checkbox" value="7.99" id="three">
 <div id="total"></div>

var total = 0;
function CalculateTotal(){
    $("input:checkbox").each(function(){
        if($(this).is(":checked")){
            total += parseFloat($(this).val());
        }
    });
    $("#total").html(total);
}

$("input:checkbox").change(function(){
    total = 0;
    CalculateTotal();
}).trigger("change");

Ссылка тут (jsfiddle.net/codeSpy/e3vb1tv8 ), заранее спасибо !!

Answer 1

[0xD34F]

data: () => ({
  items: [
    { value:  69, title:  'hello, world!!', checked: false },
    { value: 187, title:  'fuck the world', checked: false },
    { value: 666, title: 'fuck everything', checked: false },
  ],
}),
computed: {
  sum() {
    return this.items.reduce((acc, n) => acc + n.value * n.checked, 0);
  },
  checkAll: {
    get() {
      return this.items.every(n => n.checked);
    },
    set(val) {
      this.items.forEach(n => n.checked = val);
    },
  },
},

<div>
  <label>
    <input type="checkbox" v-model="checkAll">
    CHECK ALL
  </label>
</div>

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

<div>SUM: {{ sum }}</div>

Comments

[Anton8989]

Благодарю)) Скажите а можно добавить четвертый чекбокс при нажатии, на который предыдущие 3 выделяются ну и соответственно подсчитывается общая сумма?)

[0xD34F]

Обновил ответ.

[Anton8989]

Спасибо вам большое))) Очень помогли