Vue обновление computed

164
24 марта 2018, 18:14

У меня есть такие вычисляемые свойства и методы:

computed: { 
    cart: function () { 
      return Object.values(this.$store.state.cart).reverse() 
    }, 
    cartTotal () { 
      return this.$store.state.cartTotal 
    }, 
    total: function () { 
      return this.cart.reduce((first, el) => { return first + (el.count * el.price) }, 0) 
    } 
  }, 
methods: { 
       removeFromCart: function (item) { 
          this.$store.commit('removeItem', item) 
        }, 
       addItem: function (item) { 
          this.$store.commit('addItem', item) 
        }, 
       removeCart: function () { 
          this.$store.commit('removeCart') 
        }, 
       buy: function () { 
          this.$store.commit('removeCart') 
          this.success = true 
        } 
  }

И HTML:

<template> 
  <div class="capsule cart"> 
 
    <div v-if="cartTotal > 0"> 
      <h1>Корзина</h1> 
      <div class="cartitems" 
           v-for="item in cart" 
           :key="item.id" v-show="item.count"> 
        <img class="cartimg" :src="`${item.img}`" :alt="`Image of ${item.name}`"> 
        <div class="carttext"> 
          <h4>{{ item.name }}</h4> 
          <p>{{ item.price  | uah}} грн. x {{ item.count }}</p> 
        </div> 
        <div> 
        <button @click="addItem(item)">+</button> 
        <button @click="removeFromCart(item)">-</button> 
        </div> 
        <p class="totalitem">Итого: <strong>{{ item.price * item.count | uah }} грн.</strong></p> 
 
      </div> 
      <div class="total"> 
        <button class="remove" @click="removeCart">Очистить корзину</button> 
        <h3>Итого: {{ total | uah }} грн.</h3> 
      </div> 
      <div class="buy"> 
        <button class="buy" @click="buy">Купить</button> 
      </div> 
    </div> 
 
    <div v-else-if="cartTotal === 0 && success === false" class="empty"> 
      <h1>Корзина</h1> 
      <h3>Корзина пуста.</h3> 
      <router-link exact to="/"><button class="remove">За покупками!</button></router-link> 
    </div> 
 
    <div v-else> 
      <h2>Успешно!</h2> 
      <p>Твой заказ в обработке</p> 
    </div> 
  </div> 
</template>

Когда я перехожу на эту страницу, у меня total показывает цену. Когда я добавляю или удаляю товар, ничего не обновляется. Но когда я перезагружаю страницу, то все работает.

Подскажите пожалуйста в чем дело?

Answer 1

Ну так они для этого и предназначены, раз посчитать и закешировать результат. Если данные обновляются постоянно, как в вашем примере, просто не используйте их. Ссылка на доку https://ru.vuejs.org/v2/api/#computed

READ ALSO
изменить текст на кнопке

изменить текст на кнопке

Ребят подскажите, нужно при отправке данных, пока форма грузиться , отключить кнопку, инпут файл и изменить текст на кнопкеформа:

226
Как вывести таблицу через console.log?

Как вывести таблицу через console.log?

Подскажите как вывести таблицу в консольК примеру нужно вывести таблицу Пифагора

187
Laravel фильтр по таблице + paginator

Laravel фильтр по таблице + paginator

Имеется таблица в каждом столбце можно производить поиск по колонкеКак это сделать в laravel 5, используя paginator? На мой я придумал велосипед

196
Как сделать имитацию дат записей и комментариев?

Как сделать имитацию дат записей и комментариев?

На странице есть несколько блоков с записями и комментариямиКак при клике на кнопку равномерно распределить даты постов на 7 дней, и задать...

157