У меня есть такие вычисляемые свойства и методы:
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
показывает цену. Когда я добавляю или удаляю товар, ничего не обновляется. Но когда я перезагружаю страницу, то все работает.
Подскажите пожалуйста в чем дело?
Ну так они для этого и предназначены, раз посчитать и закешировать результат. Если данные обновляются постоянно, как в вашем примере, просто не используйте их. Ссылка на доку https://ru.vuejs.org/v2/api/#computed
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Ребят подскажите, нужно при отправке данных, пока форма грузиться , отключить кнопку, инпут файл и изменить текст на кнопкеформа:
Подскажите как вывести таблицу в консольК примеру нужно вывести таблицу Пифагора
Имеется таблица в каждом столбце можно производить поиск по колонкеКак это сделать в laravel 5, используя paginator? На мой я придумал велосипед
На странице есть несколько блоков с записями и комментариямиКак при клике на кнопку равномерно распределить даты постов на 7 дней, и задать...