Vue:方法不是内联模板组件标记中的函数
我有这个组件:
<template>
<div class="modal fade modal-primary" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="ImageLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg animated zoomIn animated-3x">
<div class="modal-content">
<ais-index index-name="templates"
app-id="BZF8JU37VR"
api-key="33936dae4a732cde18cc6d77ba396b27">
<div class="modal-header">
<algolia-menu :attribute="category"
:class-names="{ 'nav-item__item': 'nav-color', 'nav-item__link': 'nav-link', 'nav-item__item--active': 'active'}">
</algolia-menu>
</div>
<div class="modal-body">
<div class="container">
<ais-results :results-per-page="10" inline-template>
<div class="row">
<div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
<div class="card" @click="getTemplate(result)">
<img class="img-fluid" v-lazy="result.image"/>
<div class="card-body">
<p>{{ result.description }}</p>
</div>
<div class="card-footer">
<small>Created: {{ result.created_at }}</small>
</div>
</div>
</div>
<div class="col-6" v-for="result in results.slice(5, 10)" :key="result.objectID">
<div class="card">
<img class="img-fluid" v-lazy="result.image"/>
<div class="card-body">
<p>{{ result.description }}</p>
</div>
<div class="card-footer">
<small>Created: {{ result.created_at }}</small>
</div>
</div>
</div>
</div>
</ais-results>
</div>
</div>
</ais-index>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
import Algolia from '@/components/algolia/menu';
export default {
components: {
"algolia-menu": Algolia,
},
data() {
return {
category: 'category',
};
},
methods: {
getTemplate(result) {
console.log(result)
}
}
}
</script>
我的 <ais-results> 标签内的 .card div 上有一个点击监听器，它调用我的 getTemplate 方法.但是，每当我单击该元素时，都会产生此错误:
I have a click listener on the .card div within my <ais-results> tag which calls my getTemplate method. But, whenever I click on that element, it produces this error:
imageModal.vue?8d74:85 Uncaught TypeError: _vm.getTemplate is not a功能点击时 (imageModal.vue?8d74:85)在调用者处 (vue.runtime.esm.js:2023)在 HTMLDivElement.fn._withTask.fn._withTask
imageModal.vue?8d74:85 Uncaught TypeError: _vm.getTemplate is not a function at click (imageModal.vue?8d74:85) at invoker (vue.runtime.esm.js:2023) at HTMLDivElement.fn._withTask.fn._withTask
为什么会这样?我也尝试过 @click.native，但没有成功.
Why is this happening? I have tried @click.native as well, but that didn't work.
推荐答案
问题是您使用的是 inline template 用于您的 <ais-results> 组件标签，因此该标签内的数据引用范围为 <ais-results> 实例.这意味着 Vue 正在 <ais-results> 组件上寻找 getTemplate 方法，但没有找到.
The issue is that you’re using an inline template for your <ais-results> component tag, so the data references within that tag are scoped to the <ais-results> instance. This means Vue is looking for a getTemplate method on the <ais-results> component, but not finding it.
在您的情况下，您可以使用 result 数据发出一个事件，然后在 <ais 上侦听该事件，而不是直接调用 标签.getTemplate-results>
In your case, instead of directly calling getTemplate, you could emit an event with the result data and then listen for the event on the <ais-results> tag.
下面是一个简化的例子，点击内联模板中的 .card div 将发出 card-click 事件(@click="$emit('card-click', 结果)").<ais-results> 标记具有该事件的侦听器 (@card-click="getTemplate")，因此当 card-click 事件被触发，getTemplate 方法将被调用并自动传递 result 数据.
Below is a simplified example where clicking on the .card div in the inline template will emit a card-click event (@click="$emit('card-click', result)"). The <ais-results> tag has a listener for that event (@card-click="getTemplate"), so when the card-click event is fired, the getTemplate method will be called with the result data being passed automatically.
<ais-results :results-per-page="10" inline-template @card-click="getTemplate">
<div class="row">
<div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
<div class="card" @click="$emit('card-click', result)">
...
</div>
</div>
</div>
</ais-results>
相关文章