How to rewrite this code in vue?

Question

Vue.js

There is a code - link
Only I know vue. I read in the documentation about v-model with an array of checkboxes. I write like this:

let app = new Vue({
    el: '#app',
    data: {
        inputs: []
    }
})

<div class="checkbox-item">
                    <input type="checkbox" name="" id="c1" value="16000" class="checkbox" v-model="inputs">
                    <label for="c1">Пакет 1</label>
                </div>
                <div class="checkbox-item">
                    <input type="checkbox" name="" id="c2" value="17000" class="checkbox" v-model="inputs">
                    <label for="c2">Пакет 2</label>
                </div>
<div>
                {{inputs}}
            </div>

To me writes down in {{inputs}}simply through a line each value. And how to make the values ​​summed up, i.e. like in the original js code?

Answer 1

First of all, you should get rid of the copy-paste in the markup. We see a group of similar elements - leave one, hang on it v-for, to which an array with data will be transferred. The base unit will look something like this:

baseOptions: [
  { name: 'Свойство 1', price: 10000 },
  { name: 'Свойство 2', price: 11000 },
  ...

<ul>
  <li v-for="n in baseOptions">{{ n.name }} ({{ n.price }})</li>
</ul>

Block of additional options - similar, but these options can be selected in this way, they, in addition to the name and price, will contain one more property responsible for the state of the checkboxes (linked by v-model):

extraOptions: [
  { name: 'Пакет 1', price: 16000, checked: false },
  { name: 'Пакет 2', price: 17000, checked: false },
  ...

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

Let's make a method for calculating the amount. It will take an array of options and add up their cost:

methods: {
  sum: arr => arr.reduce((acc, n) => acc + n.price, 0),

Using this method, we calculate the sums of the basic configuration and additional options. Let's format them as computed properties:

computed: {
  baseSum() {
    return this.sum(this.baseOptions);
  },
  extraSum() {
    return this.sum(this.extraOptions.filter(n => n.checked));
  },

Finally, let's deal with the withdrawal of amounts. Let's make a filter, where the number will be reduced to a human-readable format and the name of the currency will be added:

filters: {
  price: val => `${val.toLocaleString()} р.`,

<span>{{ baseSum | price }}</span>
<span>{{ extraSum | price }}</span>
https://jsfiddle.net/3gmrs0o1/1/

Answer 2

You need a computed property
https://ru.vuejs.org/v2/guide/computed.html
Let 's say

summ() {
  return this.inputs.reduce((sum, value) => sum + value, 0)
}