<template>
<!-- Page Sidebar -->
<div class="page-sidebar" id="sidebar">
<!-- Page Sidebar Header-->
<div class="sidebar-header-wrapper">
<input type="text" class="searchinput"/>
<i class="searchicon fa fa-search"></i>
<div class="searchhelper">搜索菜单</div>
</div>
<!-- /Page Sidebar Header -->
<!-- Sidebar Menu -->
<ul class="nav sidebar-menu">
<router-link tag="li" v-for="menu in menus" :to="{ path: menu.text }">
<a :class="{ 'menu-dropdown':menu.children }" :click="setPageHeaderText(menu.ext.display_name)">
<i class="menu-icon " :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" :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 -->
</div>
<!-- /Page Sidebar -->
</template>
<style scoped>
</style>
<script>
export default{
name:'page-sidebar',
data(){
return{
menus:[]
}
},
methods: {
setPageHeaderText(text){
alert(text);
//this.$store.dispatch('getPageHeaderText',text)
}
},
mounted(){
this.axios.get('menu').then(response => {
const data = response.data.data
if(data){
for(var i=0;i<data.length;i++)
if(data[i].children != null){
data[i].text='#'
}
}
this.menus = response.data.data
setTimeout(InitiateSideMenu,1000)
})
}
}
</script>
为什么我在v-for 的标签绑定事件 事件会自动执行 在遍历时我写的alert()会一直弹出我菜单里的不同的值 我的用意实际是 我在点这个菜单时 动态的更改 面包屑的值但一刷新页面就自动执行了