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

Question

我想知道这是否可以在我的场景中完成。我在一个页面上有两个 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')

Answer 1

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

看这里：https://codepen.io/andrei-gheorghiu/pen/QWKqbwv

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

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

请注意，我还制作了 panels 道具，因此您可以从父组件中注入它们。 opening/closing 逻辑不再仅硬编码为 4 个面板，它们可以是任意数量。

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

Is there a way to pass v-model to function that toggles a specific accordion?

javascript

vue.js

element-ui