[Vuejs]-Passing data to modal:Property/method props undefined & TypeError: Cannot read property product of undefined

by

0👍

Try this:

// Product_listing.vue
// change the line by adding :product="product"
<div class="four">
    <b-btn id="show-modal" 
       class="more_details_button" 
       @click="selectProduct(product)" 
       :product="product">More details</b-btn>


// Modal_window.vue
// add the script section so that the component has a props entry for product
<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>
<script>
    export default {
        props: {
            product: { type: Object, default: null}
        }
    }
</script>

Leave a comment