我有这个组件:
<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>
我有一个点击监听器.card
div 在我的<ais-results>
调用我的标签getTemplate
方法。但是,每当我单击该元素时,它都会产生以下错误:
imageModal.vue?8d74:85 未捕获的类型错误:_vm.getTemplate 不是
功能
单击时 (imageModal.vue?8d74:85)
在调用者处 (vue.runtime.esm.js:2023)
在 HTMLDivElement.fn._withTask.fn._withTask
为什么会发生这种情况?我努力了@click.native
也是如此,但这没有用。
问题是你正在使用内联模板为您<ais-results>
组件标签,因此该标签内的数据引用的范围为<ais-results>
实例。这意味着 Vue 正在寻找一个getTemplate
方法上的<ais-results>
组件,但没有找到它。
在你的情况下,而不是直接调用getTemplate
,你可以发出一个事件result
数据,然后监听事件<ais-results>
tag.
下面是一个简化的示例,其中单击.card
内联模板中的 div 会发出card-click
event (@click="$emit('card-click', result)"
). The <ais-results>
标签有一个该事件的监听器(@card-click="getTemplate"
),所以当card-click
事件被触发,getTemplate
方法将被调用result
数据自动传递。
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)