Vue.js 简单手风琴如何打开和关闭同一个项目答案

【问题标题】：Vue.js simple accordion how to open and close the same itemVue.js 简单手风琴如何打开和关闭同一个项目
【发布时间】：2019-10-07 12:03:55
【问题描述】：

我创建了一个简单的手风琴，因为 bootstrap-vue 版本对于我的需要来说过于复杂

<template>
    <div>
        <li class="nav-item" v-for="(item, index) in items" @click="toggleItem(index)"">
            <a class="nav-link collapsed" href="#">
                <i class="fas fa-fw fa-folder"></i>
                <span>{{item.text}}</span>
            </a>

            <transition name="slide">
                <div v-if="isActive === index" class="item-active">
                    <div class="bg-white py-2 rounded">
                        <h6 class="collapse-header">Custom Components:</h6>
                        <a class="collapse-item" href="buttons.html">Buttons</a>
                        <a class="collapse-item" href="cards.html">Cards</a>
                    </div>
                </div>
            </transition>
        </li>
    </div>
</template>

<script>
export default {
    data () {
        return {
            items: [
                { text: "Page" },
                { text: "Page 2" }
            ],
            isActive: null
        }
    },
    methods: {
        toggleItem(index) {
            this.isActive = index;
        },
    }
};
</script>

当我单击链接时它会打开和关闭其他 div，但是我无法关闭并且已经打开了 div。

如何修复代码以便可以打开和关闭同一个 div？

【问题讨论】：

标签： vue.js accordion

【解决方案1】：

在您的切换方法中，如果再次单击同一项目，则需要将 this.isActive 设置为 null。

methods: {
  toggleItem(index) {
    this.isActive = this.isActive === index ? null : index;
  },
}

【讨论】：

【解决方案2】：

仅供参考，li 上的 @click 之后有一个额外的双引号 (")。

将toggleItem 重构为：

toggleItem(index) {
  this.isActive = (this.isActive === index) ? null : index;
}

如果index 匹配isActive，这会将isActive 设置为空，否则将isActive 设置为index。

【讨论】：