Передача данных в модальное состояние: свойство / метод поддерживает undefined & TypeError: Невозможно прочитать свойство продукта с неопределенным значением - PullRequest
Новая
       48

Передача данных в модальное состояние: свойство / метод поддерживает undefined & TypeError: Невозможно прочитать свойство продукта с неопределенным значением

0 голосов
/ 10 октября 2019

У меня есть список товаров, каждый из которых содержит некоторую информацию и кнопку. При нажатии кнопки (кнопка «Подробнее») открывается модальное окно, содержащее дополнительную информацию о конкретном продукте (я использовал реквизиты для передачи данных от родителя к ребенку). У меня есть корневой компонент (parent: App.vue), в котором у меня есть компонент списка товаров (child: Product_listing.vue) и компонент модального окна (grandchild: Modal_window.vue) в 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>

1 Ответ

0 голосов
/ 10 октября 2019

Попробуйте это: 

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