Как данный код переписать на vue?

Question

[anton_trofimov95]

Есть код - ссылка
Только познаю vue. Прочитал в документация про v-model с массивом чекбоксов. Пишу так:

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>

Мне записывает в {{inputs}} просто через строчку каждое значение. А как сделать так, чтобы значения суммировались, т.е. как в изначальном js коде?

Answer 1

[0xD34F]

В первую очередь следует избавиться от копипасты в разметке. Видим группу схожих элементов - оставляем один, вешаем на него v-for, которому будет передаваться массив с данными. Блок базовой комплектации примет примерно такой вид:

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

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

Блок дополнительных опций - аналогично, но так эти опции можно выбирать, они, помимо имени и цены, будут содержать ещё одно свойство, отвечающее за состояние чекбоксов (связываются посредством 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>

Сделаем метод расчёта суммы. Он будет принимать массив опций и складывать их стоимость:

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

С помощью этого метода посчитаем суммы базовой комплектации и дополнительных опций. Оформим их как вычисляемые свойства:

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

Наконец, разберёмся с выводом сумм. Сделаем фильтр, где число будет приводиться к человекопонятному формату и добавляться наименование валюты:

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

<span>{{ baseSum | price }}</span>

<span>{{ extraSum | price }}</span>

https://jsfiddle.net/3gmrs0o1/1/

Comments

[anton_trofimov95]

0xD34F cпасибо! Буду разбираться. Мне важно понять это, т.к. дальше предстоит работать с vue и важно каждую мелочь знать

Answer 2

[Alex]

Вам нужно вычисляемое свойство
https://ru.vuejs.org/v2/guide/computed.html

Скажем

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

Comments

[anton_trofimov95]

Alex, в v-model передавать summ? И как на страницу в итоге вывести? Правильно ли я понимаю, я в computed: {} записываю вашу функцию?

[Alex]

Да, и потов выводите её где хотите {{summ}}

[anton_trofimov95]

Alex

let app = new Vue({
    el: '#app',
    data: {
        inputs: []
    },
    methods: {
        
    },
    computed: {
        summ() {
            return this.inputs.reduce((sum, value) => sum + value, 0)
        }
    }
})

вот такой код не работает. В html в v-model вывожу summ и саму переменную {{summ}}

[Alex]

anton_trofimov95,