0👍
i don’t sure if this will resolve your problem but is unnecessary do:
<button class="btn btn-primary" @click="addProductToCart(product)">Add to cart</button>
because you have product
as prop of the component, should be @click="addProductToCart"
without problem.
and your method should be so:
addProductToCart() {
axios
.post('/products/create', {
product: this.product,
})
.then(response => {
console.log(response);
this.$emit('addedToCart', this.product);
});
}
One thing more, use kebab-case to call the key string when you emit to the parent component:
this.$emit('addedToCart', this.product);
replace it with:
this.$emit('added-to-cart', this.product);
Then in your parent component you have:
<Productlist :product="product" @addedToCart="addedToCart"></Productlist>
replace it with:
<Productlist :product="product" @added-to-cart="addedToCart"></Productlist>
I guess this last things will resolve your problem according the Vue documentation.
- [Vuejs]-Bootstrap-vue pagination nav not working as in the tutorial (refreshes when a page is clicked)
- [Vuejs]-Import JS file placed in /public into JS file in /src
Source:stackexchange.com