How to make a simple checkbox calculator with Vue.js?

Question

Vue.js

Good afternoon, there is not a big calculator with jquery checkboxes, you can help to do the same only on vue.js. I am attaching the code

<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");

Link here ( jsfiddle.net/codeSpy/e3vb1tv8 ), thanks in advance!!

Answer 1

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>