1PeGaS
@1PeGaS

Почему происходит вызов функции много раз при клике?

В каждом элементе в цикле срабатывает функция addf. Но при клике на кнопку происходит вызов функции addf из каждого элемента по новой, почему?

<template>
  <div>
    <div>
        <div class="product" v-for="item in poducts" :key="item.id">
            <div>
                <span v-if="addf(item.id)">123</span>
                <span v-else>321</span>
            </div>

            <button @click="localAdd(item.id)">
                <span v-if="added(item.id)">в корзине</span>
                <span v-else>в корзину</span>
            </button>
        </div>
    </div>
  </div>
</template>


<script>
import { mapState, mapActions} from 'vuex'

export default {
    computed: {
        ...mapState({
            poducts: state => state.basket.poducts,
            inBasket: state => state.basket.inBasket
        })
    },
    methods: {
        ...mapActions([
            'addProduct'
        ]),
        addf(id) {
            console.log(id);
        },
        localAdd(id) {
            this.addProduct({ id: id })
            .then(
                result => {
                    console.log('result' + result);
                },
                error => {
                    console.log(error)
                }
            );
        },
        added(id) {
            return (this.inBasket.indexOf(id) !== -1);
        },
    }
}
</script>
  • Вопрос задан
  • 135 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Наверное потому то на любое изменение состояния компонента обновляются соответствующие этому изменению значения в шаблоне. А если используются функции - они вызваться заново. По возможности не используйте функции внутри шаблонов. Используйте computed свойства.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы