One of the issues I'm facing is with an 'Add To Basket' button that triggers a Vuex store action:
<button
@click="addToBasket(item)"
>
Add To Basket
</button>
The Vuex store functionality looks like this:
const actions = {
addToBasket({ commit }, item) {
commit("setBasketItems", item);
}
};
const mutations = {
setBasketItems: (state, item) => {
let basketFind = state.basket.find(i => {
return i.id === item.id;
});
if (basketFind) {
basketFind.quantity += 1;
return;
}
item.quantity = 1;
state.basket.push(item);
}
};
const state = {
basket: []
};
const getters = {
basketItems: state => state.basket,
};
Although the Vuex store contains the correct information, when trying to update the DOM to display the item's quantity it faces some challenges:
computed: {
computedBasketItems: function() {
return this.$store.getters.basketItems;
}
},
<CartItem
v-for="item in computedBasketItems"
:key="item.id"
:item="item"
/>
However, the issue arises when displaying the quantity for each item. It only shows '1' and does not update when the quantity changes.
To tackle this problem, one approach could be to...