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

Question

[pegas]

В каждом элементе в цикле срабатывает функция 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>

Comments

[Арсений Матыцин]

В глаза долблюсь, удалил ответ.

[Just Me]

на каждый элемент передаётся ф-ция со своими параметрами. С эими же пар-рами и вызывается. Что не так?

Answer 1

[Aetae]

Наверное потому то на любое изменение состояния компонента обновляются соответствующие этому изменению значения в шаблоне. А если используются функции - они вызваться заново. По возможности не используйте функции внутри шаблонов. Используйте computed свойства.