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

Posted 2023-02-22

【中文标题】将数据传递给模态：Property/method props undefined & TypeError: Cannot read property product of undefined

【英文标题】：Passing data to modal:Property/method props undefined & TypeError: Cannot read property product of undefined

【发布时间】：2020-02-07 14:37:18

【问题描述】：

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

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.

这就是我到目前为止所拥有的，我一直在关注这个例子：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>

【参考方案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>

【讨论】：

您好，非常感谢您的回答！我设法解决了错误并按照您的操作进行操作，但是现在模式窗口没有打开，另外，我将我的问题从Vue.component('Modal-component', ... ) 修改为Vue.component('Modal_window', ... ) 对此感到抱歉。