明確我想要做什么......當Menu 1被點擊時，它ul會被顯示，同樣如果Menu 1被顯示ul，并且Menu 1被點擊，ul它不會被顯示。同樣適用于Menu 2
你能舉個例子，我怎么能做我想做的事？
Menu 1點擊Menu 1 ul 顯示或ul 顯示關閉
<ul>
<li v-for="(item,index) in menuData" :key="index">
<router-link :to="item.path" exact @click.stop="showMenu(index)">{{ item.name }}</router-link>
<ul v-if="item.children" v-show="showCollapsed">
<li v-for="(childItem,ChildIndex) in item.children" :key="ChildIndex">
<router-link :to="childItem.path">{{ childItem.name }}</router-link>
</li>
</ul>
</li>
</ul>
<script>
export default {
name: "App",
data() {
return {
openshow: false,
selected: null,
menuData: [{name: "Home", path: "/",}, {name: "About", path: "/about",}, {name: "Menu 1", path: "#", children: [{name: "Menu 1.1", path: "/menu/1/1",}, {name: "Menu 1.2", path: "/menu/1/2",}, {name: "Menu 1.3", path: "/menu/1/3",},],}, {name: "Menu 2", path: "#", children: [{name: "Menu 2.1", path: "/menu/2/1",}, {name: "Menu 2.2", path: "/menu/2/2",}, {name: "Menu 2.3", path: "/menu/2/3",},],}, {name: "Gallery", path: "/gallery",}, {name: "Contact", path: "/contact",},],
}
},
methods: {
showMenu(index) {
this.selected = index;
},
showCollapsed() {
}
}
}
</script>
uj5u.com熱心網友回復：
只需使用showMenu傳遞索引的方法，然后檢查ul要顯示傳遞索引的內容showCollapsed：
const app = Vue.createApp({
data() {
return {
openshow: false,
selected: null,
menuData: [{name: "Home", path: "/",}, {name: "About", path: "/about",}, {name: "Menu 1", path: "#", children: [{name: "Menu 1.1", path: "/menu/1/1",}, {name: "Menu 1.2", path: "/menu/1/2",}, {name: "Menu 1.3", path: "/menu/1/3",},],}, {name: "Menu 2", path: "#", children: [{name: "Menu 2.1", path: "/menu/2/1",}, {name: "Menu 2.2", path: "/menu/2/2",}, {name: "Menu 2.3", path: "/menu/2/3",},],}, {name: "Gallery", path: "/gallery",}, {name: "Contact", path: "/contact",},],
}
},
methods: {
showMenu(index) {
this.selected === index ? this.selected = null : this.selected = index;
},
showCollapsed(idx) {
return idx === this.selected || false
}
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<ul>
<li v-for="(item,index) in menuData" :key="index" @click="showMenu(index)">
<router-link :to="item.path" exact>{{ item.name }}</router-link>
<ul v-if="item.children" v-show="showCollapsed(index)">
<li v-for="(childItem,ChildIndex) in item.children" :key="ChildIndex">
<router-link :to="childItem.path">{{ childItem.name }}</router-link>
</li>
</ul>
</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/463058.html