有没有办法将 v-model 传递给切换特定手风琴的功能？

问题描述

我想知道这是否可以在我的场景中完成。我在一个页面上有两个 vue / element ui 手风琴，我为手风琴设置了一个“全部打开，全部关闭”按钮。我将如何给每个手风琴一个唯一的 ID 并将该 ID 传递给切换手风琴的函数？或者有没有办法与某种其他唯一标识符共享相同的 v-model，以便我可以在每个手风琴上重复使用该功能，但只能“打开所有，关闭所有”给定的手风琴部分。

https://codepen.io/mDDDD/pen/gOwxQxz

html：

<div id="app">
<template>
  <div class="toggle-block">
     <button @click="togglePanels()" class="toggle">
            {{ activeNames.length === 4 ? "Close" : "Open" }} all
          </button>
    </div>
<el-collapse v-model="activeNames">
    <el-collapse-item title="Panel 1" name="1">
        <div class="collapse-content">
            <p>Content 1</p>
        </div>
    </el-collapse-item>
    <el-collapse-item title="Panel 2" name="2">
        <div class="collapse-content">
            <p>Content 2</p>
        </div>
    </el-collapse-item>
    <el-collapse-item title="Panel 3" name="3">
        <div class="collapse-content">
            <p>Content 3</p>
        </div>
    </el-collapse-item>
    <el-collapse-item title="Panel 4" name="4">
        <div class="collapse-content">
            <p>content 4</p>
        </div>
    </el-collapse-item>
</el-collapse>

  <div class="spacer"></div>
  
  
    <div class="toggle-block">
     <button @click="togglePanels()" class="toggle">
            {{ activeNames.length === 4 ? "Close" : "Open" }} all
          </button>
    </div>

<el-collapse v-model="activeNames">
    <el-collapse-item title="Panel 1" name="1">
        <div class="collapse-content">
            <p>Content 1</p>
        </div>
    </el-collapse-item>
    <el-collapse-item title="Panel 2" name="2">
        <div class="collapse-content">
            <p>Content 2</p>
        </div>
    </el-collapse-item>
    <el-collapse-item title="Panel 3" name="3">
        <div class="collapse-content">
            <p>Content 3</p>
        </div>
    </el-collapse-item>
    <el-collapse-item title="panel 4" name="4">
        <div class="collapse-content">
            <p>content 4</p>
        </div>
    </el-collapse-item>
</el-collapse>
  </template>
</div>

js：

var Collapse = {
      data() {
        return {
         activeNames: []
        }
      },methods: {
    togglePanels: function() {
      if (this.activeNames.length <= 3) {
        this.activeNames.push("1","2","3","4");
      } else if ((this.activeNames.length = 4)) {
        this.activeNames = [];
      }
    }
  }
    }
var col = Vue.extend(Collapse)
new col().$mount('#app')

解决方法

可以说最简单的方法是将单个手风琴包装为一个组件。这将允许它在内部管理自己的状态，您可以拥有任意数量的状态，而不会相互干扰。

在此处查看：https://codepen.io/andrei-gheorghiu/pen/QWKqbwv

data: () => ({
  accordions: 2
})

<accordion v-for="(accordion,key) in accordions" :key="key" />

注意我还制作了 panels 一个道具，因此您可以从父组件注入它们。打开/关闭逻辑不再只硬编码为 4 个面板，它们可以任意多。