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>

Он открывает и закрывает другие элементы div, когда я нажимаю на ссылку, однако я не могу закрыть иуже открыт div.

Как исправить код, чтобы я мог открывать и закрывать тот же div?

Answer 1

В вашем методе переключения вам нужно установить this.isActive на null, если снова нажать на тот же элемент.

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

Answer 2

К вашему сведению, после @click на li.

добавлен Refactor toggleItem to:

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

. установите isActive на ноль, если index соответствует isActive, в противном случае установите isActive на index.