我有一个产品列表，其中包含更多详细信息按钮，该按钮将打开一个包含该特定产品信息的模式窗口。我使用 $emit 将信息从我的产品页面传递到模态窗口。我看到模式窗口打开，但我看不到Modal_window.vue中定义的特定产品信息。
我不断收到错误：
[Vue warn]: Error in v-on handler: "TypeError: _vm.selectProduct is not a function"
vue.esm.js?efeb:1897 TypeError: _vm.selectProduct is not a function
这是我的代码：
Product_listing.vue
<template>
<div class="content">
<div v-for="product in productsWithHeadlines" :key="product.id">
<div class="one">
<span>{{product.name}}</span>
</div>
...
<div class="seven">
<b-btn class="more_details_button" @click="selectProduct(product)">More details</b-btn>
</div>
</div>
</div>
</template>
<script>
export default {
component: {
modal_window: Modal_window
},
data() {
return {
showModal: false,
selectedProduct: undefined,
products: [
{
ID: "1",
Name: "Product_1",
Headline_1: "Headline 1",
top_feature_1:
"This is the description of the feature of product 1 under the first headline",
Headline_2: "Headline 2",
top_feature_2:
"This is the description of the feature of product 1 under the second headline",
Headline_3: "Headline 3",
top_feature_3:
"This is the description of the feature of product 1 under the third headline",
},
{
ID: "2",
Name: "Product_2",
Headline_1: "Headline 1",
top_feature_1:
"This is the description of the feature of product 2 under the first headline",
Headline_2: "Headline 2",
top_feature_2:
"This is the description of the feature of product 2 under the second headline",
Headline_3: "Headline 3",
top_feature_3:
"This is the description of the feature of product 2 under the third headline",
}
]
};
},
computed: {
selectProduct(product) {
this.selectedProduct = product;
this.$emit("openModalWindow", this.selectedProduct);
},
productsWithHeadlines() {
return this.products.map(product => {
const totalKeys = Object.keys(product).length;
const headlines = [];
for (let index = 1; index < totalKeys; index += 1) {
const text = product[`Headline_${index}`];
const feature = product[`top_feature_${index}`];
if (text && feature) headlines.push({ text, feature });
}
return {
id: product.id,
name: product.Name,
headlines,
};
});
}
}
};
</script>
Modal_window.vue我在模态窗口中使用标题数据元素以及名称。
<template id="modal-template">
<b-modal id="showModal" :hide-footer="true" ok-title="Buy Now" size="lg" :title="product.name">
<div class="inner-container">
<div class="inner-nested">
<div class="inner-one">
{{ product.name }}
</div>
<ul>
<li v-for="(headline, index) in product.headlines" :key="index">
<div>{{ headline.text }}</div>
<div>{{ headline.feature }}</div>
</li>
</ul>
<br />
<br />
</div>
</div>
</div>
</b-modal>
</template>
<script>
export default {
data() {
return {
showModal: false,
product: { type: Object, default: null }
};
},
methods: {
openModal(newProduct) {
console.log(newProduct);
this.product = newProduct;
this.$bvModal.show("showModal");
}
}
};
</script>
我将不胜感激，谢谢！
正如错误所述 - selectProduct 不是一个本身可以清除此处问题的函数。
了解vue的计算和方法属性有何不同。
计算这些属性被转换为带有getter和setter的vue属性，这意味着您可以从中获取值或设置预定义的值，它不接受参数
前任-
computed : {
hello() {
return 'helloWorld' // Getting a value
}
}
您将使用它作为this.hello其中作为方法，这些方法完全是JS中正常function的副本，其中具有理解其他vue属性的能力
methods : {
hello(name) {
return 'hello' + name // Getting a value
}
}
如前所述，它是一个fn，因此它也可以具有参数，您可以将其用作fn，例如this.hello(name)
在您的情况下，您可能希望将selectProduct财产移至methods财产，而不是作为computed财产。