Vue.js：手风琴在 for 循环中不起作用

Posted 2023-02-16

【中文标题】Vue.js：手风琴在 for 循环中不起作用

【英文标题】：Vue.js: Accordion is not working in for loop

【发布时间】：2021-11-25 14:47:36

【问题描述】：

我为单个项目添加了手风琴，它工作正常，但后来我添加了 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
        ;
        
    

如图所示，如果我点击男性、女性和配饰，则会展开。

【问题讨论】：

你的应用是对所有人开放，只有一个状态，你需要把它做成一个状态数组，或者在菜单模型上设置它是否打开

【参考方案1】：

尝试如下 sn-p:

您可以添加另一个数据属性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>

【参考方案2】：

您已将@click="toggleAccordion" 设置为所有项目。为了解决您的问题，每个项目都需要自己的状态。例如，可以这样做：

首先，以object 的形式提供您的状态：

return 
            isOpen: 
        

由于我不知道你的数据结构，我只是用一个简单的array 或objects 做了这个例子，如下所示：

testObject: [
        name: "hello1",
        name: "hello2",
        name: "hello3",
        name: "hello4"
      ]

只需在created 中循环，为所有人生成一个状态，如下所示：

for(let itemId in this.testObject) 
      Object.assign(this.isOpen, [itemId]: false)
    

object isOpen 现在看起来像这样：

   "0":false,
   "1":false,
   "2":false,
   "3":false

现在您可以使用循环中的index 调用toggleAccordion，例如toggleAccordion(index)，并将函数更改为：

toggleAccordion(index) 
      this.isOpen[index] = !this.isOpen[index];
    

您现在申请isOpen 之前在哪里申请isOpen[index]。