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

【问题标题】：Is there a way to pass v-model to function that toggles a specific accordion?有没有办法将 v-model 传递给切换特定手风琴的功能？
【发布时间】：2020-12-22 12:37:30
【问题描述】：

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

【问题讨论】：

您如何将activeNames 提供给此崩溃的各种实例？他们来自哪里？因为在我看来他们不是data，而是props。我说的对吗？
@tao，是的，我相信这是正确的。 “名称”道具在每个项目上。崩溃状态由 v-model 控制。我可以更改每个手风琴上的 v-model 名称，这在某种程度上确实有效。我的最终目标是使用相同的函数并传递一个唯一的 id，因此如果我添加更多手风琴，我可以使用该函数切换特定的手风琴。
不需要。我无法理解您要达到的目标，但看到笔澄清了它。是的，有可能，如果有人在我之前没有这样做，我会玩一下并发布答案。

标签： javascript vue.js element-ui

【解决方案1】：

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

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

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

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

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

【讨论】：