Vue.js 简单的 Accordion 如何打开和关闭同一个项目

Question

我创建了一个简单的 Accordion ，因为 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？

Answer 1

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

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