时间戳

首页 > 解决方案 > 如何使用索引在 Vuejs (vuetify) 中仅选择一个扩展面板？

javascript - 如何使用索引在 Vuejs (vuetify) 中仅选择一个扩展面板？

问题描述

我在我的 Vue.js 项目中使用 Vuetify，但扩展面板有问题。我正在对一组对象进行 v-for，然后我将扩展面板与外部控制一起放置。外部控制是指与面板分离的按钮，用于展开和关闭面板。

我现在的代码是这样的：

     <v-btn @click="showHidePanel(index)">
        Button
      </v-btn>
      <v-expansion-panels v-model="panel>
        <v-expansion-panel>
          <v-expansion-panel-content>
            I am expanded!
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>

现在我的脚本：

data() {
  return {
     panel: [],
  }
}



//
showHidePanel(data) {
  if (this.panel.length == 0) {
    this.panel = [...Array(data).keys()].map((k, i) => i);
  } else {
    this.panel = [];
  }
},

由于“面板”变量是一个数组，所有面板都在扩展，但我尝试过使用整数，但它也不起作用。任何人都可以帮助我吗？

标签： javascripthtmlvue.jsecmascript-6vuetify.js

解决方案

看起来您已经showHidePanel从docs复制了您的功能。该功能旨在切换所有面板或不切换任何面板。要仅在index使用时切换面板：

showHidePanel(index) {
  if (this.panel.indexOf(index)) {
    this.panel = this.panel.filter(i => i!=index);
  } else {
    this.panel.push(index);
  }
},

推荐阅读