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

Question

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

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

如何修复代码以便我可以打开和关闭相同的 div？

Answer 1

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

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

Answer 2

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

重构 toggleItem 为：

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

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

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

Vue.js simple accordion how to open and close the same item

accordion

vue.js