当点击vuejs和pug中的一个标签时，会调用所有锚标签的onclick函数

Question

我有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函数都被调用了？

在这种情况下，所有"report“、"adSet”、"adSetList“、"sites”都会被记录

Answer 1

您的语法不正确！它不是绑定syntax.You需要使用@click="selectTab('reports')"或v-on:click="selectTab('reports')"的vue事件；至于记录器，这是因为当vue组件初始化时，它会自动调用依赖数据的getter来获取依赖关系！

Answer 2

如果您将单击event放在router-link上，并稍微更改一下语法，properly.You应该将:onclick更改为v-on:click或@click，当使用时，单击event on router-link将.native添加到事件中。下面是一个示例：

​

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>

​