javascript - Vue.js:手风琴在 for 循环中不起作用
问题描述
我为单个项目添加了手风琴,它工作正常,但后来我添加了 for 循环,现在当我单击任何项目时,所有项目都得到扩展。
<template>
<ul class="level-0-wrp" v-if="headerDesktopMenu.menu.menu_items">
<li class="level-0" v-for="(menu, index) in headerDesktopMenu.menu.menu_items" :key="index" :class="accordionClasses" v-if="headerDesktopMenu.menu.menu_items">
<a class="title" @click="toggleAccordion">{{ menu.item_name }}</a>
<ul class="level-1-wrp" v-if="menu.childrens">
<li class="level-1" v-for="(submenuone, indexone) in menu.childrens" :key="indexone" v-if="menu.childrens">
<a class="title">{{ submenuone.item_name }}</a>
</li>
</ul>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
isOpen: false
}
},
methods: {
toggleAccordion () {
this.isOpen = !this.isOpen;
}
},
computed: {
accordionClasses () {
return {
'is-closed': !this.isOpen,
'is-primary': this.isOpen,
'is-dark': !this.isOpen
};
}
}
}
如图所示,如果我点击男性、女性和配饰,则会展开。
解决方案
试试下面的代码片段:
您可以添加另一个数据属性selected: ''
,然后在模板中切换手风琴v-if="isOpen && menu.item_name === selected"
。在您设置的方法中选择:
toggleAccordion (item) {
item == this.selected ? this.isOpen = !this.isOpen : this.isOpen = true
this.selected = item
}`
new Vue({
el: '#demo',
data () {
return {
isOpen: false,
selected: '',
headerDesktopMenu: {
menu: {
menu_items: [{item_name:11111, childrens: [{item_name: 11}, {item_name: 12}]},{item_name:22222, childrens: [{item_name: 21}, {item_name: 22}]},{item_name:33333, childrens: [{item_name: 31}, {item_name: 32}]},{item_name:44444, childrens: [{item_name: 41}, {item_name: 42}]}]
}
}
}
},
methods: {
toggleAccordion (item) {
item == this.selected ? this.isOpen = !this.isOpen : this.isOpen = true
this.selected = item
}
},
computed: {
accordionClasses () {
return {
'is-closed': !this.isOpen,
'is-primary': this.isOpen,
'is-dark': !this.isOpen
};
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul class="level-0-wrp" v-if="headerDesktopMenu.menu.menu_items">
<li class="level-0" v-for="(menu, index) in headerDesktopMenu.menu.menu_items" :key="index" :class="accordionClasses" v-if="headerDesktopMenu.menu.menu_items">
<a class="title" @click="toggleAccordion(menu.item_name)">{{ menu.item_name }}</a>
<ul class="level-1-wrp" v-if="menu.childrens">
<li class="level-1" v-for="(submenuone, indexone) in menu.childrens" :key="indexone" v-if="isOpen && menu.item_name === selected">
<a class="title">{{ submenuone.item_name }}</a>
</li>
</ul>
</li>
</ul>
</div>
推荐阅读
- php - Laravel Excel 导出 - 类型错误:传递给 Maatwebsite\Excel\Excel::download() 的参数 2 必须是字符串类型
- react-native - react-fetch-blob 使用 downloadManager 时不会调用进度
- c# - 您必须从 Disposed 订阅吗?
- javascript - Paylike 模态金额参数
- java - Hibernate 3 到 4 迁移
- c# - 找不到“Vektor2”
- bash - 检查第一列是否有 4 位数字,如果不是用零填充
- bash - 遍历 bash 中 curl 请求的列表
- c# - 我想将 SQL Server 2019 连接到 Unity 吗?如何摆脱这些错误?统一2019.2.11f1
- python - 通过@property 中的字段列表获取相关对象的值