[英]Vue directives inside templates
我是vueJs的新手,我正在尝试创建类似菜单的菜单。 我有一个下拉导航栏,每个链接都会创建一个新选项卡,这个新选项卡是一个Vue组件。
我试图在创建的选项卡中放置一个v-on:click
指令,但它不会调用该函数。 事实上我得到的错误就像
“属性或方法”removeTab“未在实例上定义,但在渲染期间引用。”
和
“removeTab不是一个功能。”
但是removeTab
是一个函数,如果我把v-on:click
一个静态的html标签就行了。 我做错了什么,或者是否无法在动态加载的组件中使用指令?
这是我的代码的简化版本,只是为了更好地展示我想要解释的内容。 RemoveTab只是一个警报,只是为了显示它何时起作用以及何时起作用。
HTML
<div id="application">
<button class="item" v-on:click="addTab()">Add Button</button>
<button class="item" v-on:click="removeTab()">Remove</button>
<br><br>
<div >
<tab v-for ="tab in tabs" :tab="tab"></tab>
</div>
</div>
<template id="tab-template">
<button class="item">
{{tab.nomeTab}} <div v-on:click="removeTab()">remove</div>
</button>
</template>
JS
Vue.component('tab', {
template: '#tab-template',
props: ['tab']
});
new Vue({
el: '#application',
data:{
newTab:'',
tabs: [
{nomeTab:'Home', contenutoTab:'ciao'},
]
},
methods:{
addTab: function() {
this.tabs.push({
nomeTab: 'NewTab',
});
},
removeTab: function () {
alert("Here it works");
}
}
});
这里是JSFiddle 。
感谢您的关注
Vue有孤立的范围。 您在选项卡组件的模板中有v-on:click="removeTab()"
,但它未在组件中定义。
@Leo是对的; 实质上,您正在尝试在您的孩子中调用removeTab
方法,但该方法是在您的父级上定义的。 孩子无法直接访问父母的方法。
为了让您的示例正常工作,由于您的父级可能会管理选项卡,因此您需要从选项卡中发出事件并在父级中侦听事件。
<button class="item" v-on:click="$emit('remove-tab')">{{tab.nomeTab}} <div >remove</div></button>
并在父模板中
<tab v-for ="tab in tabs" :key="tab" :tab="tab" @remove-tab="removeTab"></tab>
这是你的小提琴修复。
我也没有为你的v-for
添加一把key
。 你应该总是使用v-for
的key
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.