Vue.js中如何实现两个Accordion组件的位置互换？

要实现手风琴项的位置互换，核心是用数据驱动渲染，把静态写死的手风琴项改成动态数组，通过操作数组元素的位置来实现UI上的互换。以下是具体实现步骤：

1. 重构数据结构 #

在Vue组件的data中定义手风琴项的数组，每个元素包含标题、内容、展开状态等信息：

data() {
  return {
    accordionItems: [
      {
        title: 'User',
        content: '<strong>User Content</strong>',
        isExpanded: true
      },
      {
        title: 'View',
        content: '<strong>View Content</strong>',
        isExpanded: false
      }
    ]
  }
}

2. 动态渲染手风琴组件 #

把原静态模板改成用v-for循环渲染，动态绑定所有依赖于项的属性（比如id、aria属性、展开状态类）：

<template>
  <div class="accordion" id="accordionExample">
    <!-- 渲染手风琴标题项 -->
    <div class="accordion-item" v-for="(item, index) in accordionItems" :key="`header-${index}`">
      <h2 class="accordion-header" :id="`heading${index + 1}`">
        <button 
          class="accordion-button"
          :class="{ collapsed: !item.isExpanded }"
          type="button"
          data-bs-toggle="collapse"
          :data-bs-target="`#collapse${index + 1}`"
          :aria-expanded="item.isExpanded"
          :aria-controls="`collapse${index + 1}`"
        >
          {{ item.title }}
        </button>
      </h2>
    </div>

    <!-- 渲染手风琴内容项 -->
    <div v-for="(item, index) in accordionItems" :key="`content-${index}`">
      <div 
        :id="`collapse${index + 1}`"
        class="accordion-collapse collapse"
        :class="{ show: item.isExpanded }"
        :aria-labelledby="`heading${index + 1}`"
        data-bs-parent="#accordionExample"
      >
        <div class="accordion-body" v-html="item.content"></div>
      </div>
    </div>

    <!-- 互换触发按钮 -->
    <button class="mt-3 btn btn-primary" @click="swapItems">互换手风琴位置</button>
  </div>
</template>

3. 实现互换方法 #

在Vue的methods中添加互换数组元素的方法，直接交换数组中两个元素的位置即可：

methods: {
  swapItems() {
    // 交换数组第一个和第二个元素（若有多个项，可扩展为交换指定索引）
    [this.accordionItems[0], this.accordionItems[1]] = [this.accordionItems[1], this.accordionItems[0]];
    
    // Vue 2版本需注意：直接赋值可能无法触发响应式，改用splice
    // const temp = this.accordionItems[0];
    // this.accordionItems.splice(0, 1, this.accordionItems[1]);
    // this.accordionItems.splice(1, 1, temp);
  }
}

关键说明 #

• 动态渲染后，UI会自动跟随数组数据的变化更新，无需手动操作DOM。
• 动态绑定id和相关属性时，用索引拼接生成唯一标识，避免静态id的冲突问题。
• Vue 2对数组变更的响应式检测有限，需使用splice或Vue.set修改数组；Vue 3支持直接解构赋值的响应式更新。

内容的提问来源于stack exchange，提问作者16_018_RHR