Не могу узнать общее количество элементов в массиве Vue js

Файл который берет данные из store из Vuex. Когда я добавляю в корзину то считается только элементы которые отличаются, но при добавлении одинаковых просто не увеличиваются больше одного

<template>
  <div class="v-catalog">
    <router-link :to="{name: 'cart', params: {cart_data: CART}}">
      <div class="v-catalog__link_to_cart">Cart: {{CART.length}}</div>
    </router-link>

    <h1>catalog</h1>
    <div class="v-catalog__list">
      <v-catalog-item
        v-for="product in PRODUCTS"
        :key="product.article"
        :product_data="product"
        @addToCart="addToCart"
      ></v-catalog-item>
    </div>
  </div>
</template>

в Store простой массив cart: []


Ответы (1 шт):

Автор решения: Ilia Safin

Что значит - "только те, которые отличаются"? Вы берете данные напрямую из vuex? Через геттер или напрямую ссылаетесь? А при добавлении элемента в корзину - вы добавляете его напрямую в vuex или через мутации? Лучше приведите код ваших методов, тогда будет проще ответить на ваш вопрос, пока предварительно предположу что дело в реактивности - вы добавляете в массив новый элемент, vue его считает в общем количестве - то есть vue видит что массив измненился. Но при изменении элемента массива, который уже был там - vue не отслеживает изменения и соответственно не отрисовывает изменение количества. В метод после изменения колличества существующего элемента массива можно добавить: arr.splice(arr.length) , где arr - ваш массив корзины. Для понимания этой темы советую почитать документацию

→ Ссылка