Как динамически пересчитывать значения данных и отображать их в верстке?

Question

[nastya_zholudeva]

У меня есть массив объектов данных. Есть параметр count, отвечающий за количество.
С помощью v-for "загружаю" данные в верстку. Сталкиваюсь с такой проблемой

<div class="main-catalog-list-count">
                        <span class="box-counter">
                            <span class="counter__link counter__link-prev"><i class="icon-arrow-down icon-arrow-top" @click="counterNext($event)"></i></span>
                            <span class="counter__input">
                                <input type="text" v-model="good.count"  disabled class="js-width-dynamic"><span> шт.</span>
                            </span>
                            <span class="counter__link counter__link-next"><i class="icon-arrow-down" @click="counterPrev($event)"></i></span>
                        </span>
                        <span class="main-catalog-list-count__devide"><i class="icon-close"></i></span>
                        <span class="main-catalog-list-count__col-name">
                            <a href="#win_7" class="js-fancybox">
                                <span class="main-catalog-list-count__name">«{{good.brend}}»</span>
                                <span class="main-catalog-list__price"><b v-html="sup(good.price.toString())"></b></span>
                            </a>
                        </span>
                        <span class="main-catalog-list-count__devide">=</span>
                        <span class="main-catalog-list-count__col-total">
                            <span class="main-catalog-list-count__name">итого</span>
                            <span class="main-catalog-list__price"><b v-html="sup((good.count * good.price).toString())"></b> <span class="rub">;</span></span>
                        </span>
                    </div>

При нажатии на стрелочки меняется количество и должно меняться значение "итого". Как это можно сделать?

Answer 1

[0xD34F]

Передавайте в метод объект товара, и там уже делайте его count'у +/-1:

<i class="icon-arrow-down" @click="updateCount(good, -1)"></i>
<i class="icon-arrow-top" @click="updateCount(good, 1)"></i>

methods: {
  updateCount(good, change) {
    good.count = Math.max(0, good.count + change);
  },
},

Comments

[nastya_zholudeva]

0xD34F, спасибо:) вы как всегда мне помогли:)