I'm working on a product listing feature where each item displays some information along with a "more details" button. When the button is clicked, a modal window opens to show additional details of the specific product (using props to pass data between parent and child components). In my Vue project, I have a root component (App.vue) that houses a product listing component (Product_listing.vue) and a modal window component (Modal_window.vue). Since the child and grandchild components share a parent-child relationship, I am using props here. However, I keep encountering these errors:
Property or method "props" is not defined on the instance but referenced during render.[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'product' of undefined.TypeError: Cannot read property 'product' of undefined.
This is my current setup, and I've been following this example provided here: https://jsfiddle.net/5tgq4dof/1/
PARENT COMPONENT(Product_listing.vue)
<template>
<div class="content">
<div class="nested" v-for="product in products">
<div class="one"><span>{{product.Name}}</span></div>
<div class="two"><span>-{{ product.Reduction_percentage }}%</span></div>
<div class="three"><span>{{ product.Short_Description }}</span></div>
<div class="four"><b-btn id="show-modal" class="more_details_button" @click="selectProduct(product)">More details</b-btn></div>
</div>
</div>
</template>
<script>
Vue.component('Modal_window', {
template: '#modal-template',
props:['product', 'open']
})
export default {
data () {
return {
showModal: false,
selectedProduct: undefined,
products: [
{id: 1, Name: 'Product 1', Reduction_percentage: 30, Short_Description:"Something", Description:"Something more"},
{id: 2, Name: 'Product 2', Reduction_percentage: 33, Short_Description:"Something", Description:"Something more"},
{id: 3, Name: 'Product 3', Reduction_percentage: 23, Short_Description:"Something", Description:"Something more"},
{id: 4, Name: 'Product 4', Reduction_percentage: 77, Short_Description:"Something", Description:"Something more"},
{id: 5, Name: 'Product 5', Reduction_percentage: 99, Short_Description:"Something", Description:"Something more"},
],
}
},
methods: {
selectProduct(product) {
this.selectedProduct = product
this.showModal = true
}
}
}
</script>
Child component(Modal_window.vue)
<template id="modal-template">
<b-modal v-show="showModal" :product="selectedProduct" hide-footer="true" ok-title="Buy Now" size="lg" :title="product.Name">
<div class = "inner-container">
<div class = "inner-nested">
<div class="inner-one"><br> {{product.Description}}</div>
<div class="inner-two">
-{{ product.Reduction_percentage }}%</div>
<div class="inner-three"> <button>Buy Now</button></div>
</div>
</div>
</b-modal>
</template>