我有4个具有相同onclick函数的锚标签，但是当我单击一个标签时，所有标签的onclick函数都会被调用
ul.menu-list
router-link(tag="li" to="/reports")
a.has-text-white(:onclick='selectTab("reports")') Report
router-link(tag="li" to="/adList")
a.has-text-white(:onclick='selectTab("adSet")') AdSet
router-link(tag="li" to="/adSetList")
a.has-text-white(:onclick='selectTab("adSetList")') AdSetList
router-link(tag="li" to="/sites")
a.has-text-white(:onclick='selectTab("sites")') Sites
和onclick函数是：
selectTab(tabName: string) {
console.log(tabName);
}
所以我想知道为什么当我单击“报告”时，会调用所有标记的onclick函数？
在这种情况下，所有“报告”，“ adSet”，“ adSetList”，“站点”都被记录
答案 0 :(得分：0)
您的语法不正确！它不是vue事件绑定语法。您需要使用@click="selectTab('reports')"
或v-on:click="selectTab('reports')"；
对于记录器，因为启动vue组件时，它会自动调用相关数据的获取程序来获取相关性！
答案 1 :(得分：0)
如果您将{strong> click事件 放在router-link上，并稍微修改一下可以正常工作的语法。则应将:onclick更改为v-on:click或@click，并在router-link上使用 click事件 时，添加 .native < / strong>。这是一个示例：
const Home = {
template: '<div id="home">Reports</div>'
}
const Component1 = {
template: '<div id="component1">Adset</div>'
};
const Component2 = {
template: '<div id="component2">Adsetlist</div>'
};
const Component3 = {
template: '<div id="component3">sites</div>'
};
const routes = [
{ path: '/reports', component: Home },
{ path: '/adList', component: Component1 },
{ path: '/adSetList', component: Component2 },
{ path: '/sites', component: Component3 },
]
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
data: {
},
methods: {
selectTab(tabName) {
console.log(tabName);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
<body class="text-center body">
<div id="app">
<ul class="menu-list">
<router-link tag="li" to="/reports" v-on:click.native="selectTab('reports')">
<a class="has-text-white">Report</a>
</router-link>
<router-link tag="li" to="/adList" v-on:click.native="selectTab('adSet')">
<a class="has-text-white">AdSet</a>
</router-link>
<router-link tag="li" to="/adSetList" v-on:click.native="selectTab('adSetList')">
<a class="has-text-white">AdSetList</a>
</router-link>
<router-link tag="li" to="/sites" v-on:click.native="selectTab('sites')">
<a class="has-text-white">Sites</a>
</router-link>
</ul>
<router-view></router-view>
</div>
</body>