I'm currently developing an e-commerce platform utilizing vue.js with a backend API. The root component is named Main.vue, consisting of a navigation section using router-link and a main content area displayed by router-view.
Within the Cart.vue route, whenever a user modifies the quantity of a product, I require Cart.vue to emit an event to the root component Main.vue in order to trigger the getCartTotal() function.
Note: Cart.vue is not a child component of Main.vue.
Main.vue :
<template>
<div>
<!-- Main content of Main.vue -->
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
// methods and functions for Main.vue component
};
</script>
<style>
</style>
And Cart.vue :
<template>
<div>
<!-- Main content of Cart.vue -->
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
data() {
return {
cartData: [],
emptyCart: false,
loading: true
};
},
created() {
this.getCartContent();
},
methods: {
// other methods and functions
updateCartQuantity(pkey, pquan) {
// logic for updating cart quantity
// triggering getCartTotal() function in Main.vue
},
}
};
</script>
<style scoped la>
.cart-product-row {
/* styling*/
}
#cart-delete {
/* styling */
}
</style>
In conclusion, the updateCartQuantity() function within Cart.vue should activate the getCartTotal() function in Main.vue.