将数据传递给模态：Property/method props undefined & TypeError: Cannot read property product of undefined

Question

我有一个产品列表，每个列表都包含一些信息和一个按钮。单击该按钮（更多详细信息按钮）会打开一个模式窗口，其中包含该特定产品的（我使用道具将数据从父级传递给子级）更多信息。我有一个根组件（父组件：App.vue），在它下面我有一个产品列表组件（子组件：Product_listing.vue）和一个模式窗口组件（孙子组件：Modal_window.vue）。我想孩子和孙子也有亲子关系，因此我在这里使用了道具。我不断收到这些错误：

1. Property or method "props" is not defined on the instance but referenced during render.
2. [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'product' of undefined.
3. TypeError: Cannot read property 'product' of undefined.

这就是我到目前为止所拥有的，我一直在关注这个例子：https://jsfiddle.net/5tgq4dof/1/

父组件（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>

子组件（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>

Answer 1

试试这个：

// 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>