У меня есть приложение "^ 2.6.11" версии vue с vuex, в которое я добавляю товары в корзину. Мои товары имеют разные вариации, такие как цвет, поэтому перед добавлением в корзину у меня есть два условия: сравнивать цвет и идентификатор товара
product.productId == item.productId && product.colour == item.colour
Цвет выбирается из поля выбора, для свойства продукта устанавливается выбранный цвет при событии изменения из поля выбора.
this.item.colour = event.target.value
Проблема в том, что он обновляет текущий товар в корзине, даже если цвет изменяется, например:
В поле выбора отображается золото, "добавить в корзину "нажата, и золотой предмет добавлен в корзину.
Поле выбора изменено на серебряное, компонент продукта меняет свое цветное свойство на серебристое, и нажимается" добавить в корзину ".
Текущий товар в количестве корзины меняется на 2, а его цвет меняется на серебристый.
Странно то, что когда я перехожу к оформлению заказа и затем нажимаю кнопку "Назад", добавление в корзину работает так, как я хочу, добавляя новый вариант элемента в корзину. однако, когда я добавляю другой вариант после этого, он работает как в первый раз.
Надеюсь, это имеет смысл. Я не понимаю, почему это не работает до нажатия кнопки "Назад".
Я не могу настроить Jsfiddle или фрагмент кода, потому что здесь так много компонентов, работающих вместе, поэтому я буду добавьте немного моего кода ниже.
// Product.vue
<template>
<div>
<b-col>
<b-card
v-bind:title="product_type"
v-bind:img-src="imagePath"
img-alt="Image"
img-top
tag="article"
style="max-width: 15rem;"
class="mb-2">
<b-card-text>{{ product_type }}</b-card-text>
<div class="form-group">
<label for="colourSelect">Please select a colour</label>
<select @change="onChange($event)">
<option v-for="item in metal_colour" v-bind:key="item">
{{ item }}
</option>
</select>
</div>
<div class="clearfix">
<div class="price pull-left" v-bind:key="price">€{{ price }}</div>
<div class="text-right">
<b-button @click="addToCart" variant="primary">Add to cart</b-button>
...
</template>
<script>
export default {
name: 'Product',
props: {
productId: Number,
imagePath: String,
product_type: String,
metal_colour: Array,
price: Number,
qty: Number
},
data() {
return {
item: {
productId: this.productId,
imagePath: this.imagePath,
product_type: this.product_type,
price: this.price,
colour: 'Gold',
qty: 1
}
}
},
methods: {
addToCart() {
this.$store.commit('addToCart', this.item)
this.$bvModal.show('modal-1')
},
onChange(event) {
this.item.colour = event.target.value
}
}
}
</script>
// store/index.js Vuex
...
mutations: {
addToCart(state, item) {
let found = state.inCart.find(
product =>
product.productId == item.productId && product.colour == item.colour
)
if (found) {
found.qty++
} else {
state.inCart.push(item)
}
}
},
...
Для моей корзины покупок я использую модал, и элементы перечислены следующим образом:
// Cart.vue
<div>
<b-table striped :items="this.$store.state.inCart">
<template v-slot:cell(imagePath)="data">
<img :src="data.value" class="thumb" alt="product" />
{{ data.imagePath }}
</template>
</b-table>
</div>
<div slot="modal-footer">
<router-link to="/checkout">
<b-button variant="primary" @click="$bvModal.hide('modal-1')">
Checkout
</b-button>
</router-link>
<b-button class="modalBtn" variant="primary" @click="$bvModal.hide('modal-1')">
Continue Shopping
</b-button>
</div>