Я использую Vuex впервые.Я проследил некоторые онлайн-уроки и до сих пор сумел добавить товары в корзину, но застрял с опциями.
Поэтому, когда я нажимаю кнопку «Добавить к товару», мой модал появляется с категориями ароматов.
<uivmodal v-model="optionsModal" title="Select Option(s)" :footer="false" ref="optionsModal" id="modal-demo" ok-text="Confirm">
<span v-for="(deal, tIndex) in optionTypes">
<div v-for="i in deal.Qty">
<div class="row">
<div class="col-md-12">
<div class="panel-group" id="accordion" :key="deal.ID">
<div v-for="" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" :href="'#'+sortName(deal.TypeName)+i">{{ deal.TypeName }}<i class="indicator icon_plus_alt2 pull-right"></i></a>
</h4>
</div>
<div :id="sortName(deal.TypeName)+i" class="panel-collapse collapse"><!-- in -->
<div class="panel-body">
<table class="table">
<tbody>
<!-- <tr v-for="(opt, index) in getOptions(deal.TypeID)"> -->
<tr v-for="(opt, index) in options" v-if="opt.TypeID == deal.TypeID" >
<td width="2%">{{ index+1 }}</td>
<td width="70%">{{ opt.Flavour }}</td>
<td width="20%">{{ opt.Price }}</td>
<td width="8%" ref="checkbox">
<input type="radio" name="option_item_settings_5" :name="opt.TypeID+i"
@click="setOption(tIndex, (i-1), opt.ID)" class="icheck opt" :value="opt.ID">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- End col-md-12-->
</div><!-- End row-->
</div>
</span>
<div class="modal-footer" >
<span class="error">{{ error }}</span>
<div class="wrapper_indent" :hidden="canISave()">
<button @click="callback" class="btn_1">Save now</button>
</div><!-- End wrapper_indent -->
</div>
</uivmodal>
при выборе каждой радиокнопки Я вызываю эту функцию
setOption(tIndex, index, option_id)
{
var options = { 'option_id': option_id, option: this.getFlavour(option_id).Flavour };
this.optionTypes[tIndex].Options[index] = options;
for (let i in this.optionTypes[tIndex].Options){
if(this.optionTypes[tIndex].Options[i].option_id != undefined){
this.selectedOptions.push(i);
}
}
},## Heading ##
при нажатии кнопки я вызываю эту функцию
callback (msg) {
if(this.canISave()){
this.error = 'Select all options';
return false;
}
this.$store.dispatch('addToCart', this.product);
this.clearOptions();
},
Это то, что мой store.js
let cart = window.localStorage.getItem('cart');
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
inCart: cart ? JSON.parse(cart) : [],
products: [],
},
getters: {
forSale: state => state.forSale,
inCart: state => state.inCart,
},
mutations: {
ADD_TO_CART(state, item) {
let found = state.inCart.find(product => product.ID == item.ID);
if (found && item.isDeal == '') {
found.quantity ++;
found.totalPrice = found.quantity * found.price;
} else {
state.inCart.push(item);
Vue.set(item, 'quantity', 1);
Vue.set(item, 'totalPrice', item.Price);
}
this.commit('saveCart');
},
saveCart(state) {
window.localStorage.setItem('cart', JSON.stringify(state.inCart));
},
REMOVE_FROM_CART(state, index)
{
state.inCart.splice(index, 1);
this.commit('saveCart');
}
},
actions: {
addToCart(context, invId) { context.commit('ADD_TO_CART', invId); },
removeFromCart(context, index) { context.commit('REMOVE_FROM_CART', index); },
},
});
При добавлении нескольких одинаковых товаров с разными опциями ранее добавленные товары также обновляются.
Что я делаю не так?