javascript - router-link v-for 上的 @click 不执行是怎么回事

Question

<template>

    <!-- Page Sidebar -->
    <p class="page-sidebar" id="sidebar">
        <!-- Page Sidebar Header-->
        <p class="sidebar-header-wrapper">
            <input type="text" class="searchinput"/>
            <i class="searchicon fa fa-search"></i>

            <p class="searchhelper">搜索菜单</p>
        </p>
        <!-- /Page Sidebar Header -->
        <!-- Sidebar Menu -->
        <ul class="nav sidebar-menu">
            <li><a @click="setPageHeaderText('ddd')">sdfds</a></li>
            <router-link tag="li" v-for="menu in menus" :to="{ path: menu.text }">
                <a v-bind:class="{ 'menu-dropdown':menu.children }" @click="setPageHeaderText('caca')">
                    <i class="menu-icon " v-bind:class=" menu.ext.icon "></i>
                    <span class="menu-text"> {{ menu.ext.display_name }} </span>
                    <i class="menu-expand" v-if="menu.children"></i>
                </a>

                <ul class="submenu" v-if="menu.children">
                    <router-link tag="li" v-for="submenu in menu.children" v-bind:class="'second'"
                                 :to="{ path: submenu.ext.name }"
                                 active-class="active">
                        <a @click="setPageHeaderText(submenu.ext.display_name)">
                            <span class="menu-text">{{ submenu.ext.display_name }}</span>
                        </a>
                    </router-link>
                </ul>
            </router-link>

        </ul>
        <!-- /Sidebar Menu -->
    </p>
    <!-- /Page Sidebar -->

</template>
<style scoped>

</style>
<script>

    export default{
        name:'page-sidebar',

        computed:{
            menus(){
                return this.$store.state.menus
            }
        },
        methods: {
            setPageHeaderText(text){
                console.log(text)
                //动态设置page-header
                this.$store.dispatch('setPageHeaderText',text)
            }
        }
    }
</script>

在router-link 上面的
<li>sdfds</li>
这句都 可以执行 但是在v-for 遍历出来的上面的事件没有执行 这是怎么回事
v-for的数据是ajax请求过来的 数据正常

Answer 1

直接看 vue-router 的代碼，就可以看到端倪了：
Github

如果當前 router-link 的 tag 不是 a 的話，就會往自己的子元素(組件)找，找到的第一個就會把一些屬性及事件覆蓋過去。

所以跟 v-for，ajax 沒啥關係，主要就是這裡被覆蓋掉了，所以這邊建議不要使用 router-link，就普通的用 li 就好，並且綁定個 @click="go(menu.text, 'caca')

methods: {
    go(routeName, title) {
        this.$store.dispatch('setPageHeaderText',text)
        this.$router.push({ path: routeName })
    }
}

這樣，應該會更簡單清楚。