как вставить только один div между элементами цикла v-for?
Хочу между двумя элементами вставить кнопку-переключатель. Если делаю так, то кнопка вставляется дважды, а нужно, чтобы она появилась между двумя элементами. Почему именно цикл? не хочу потерять индекс, так как меняю состояние дважды - по клику на title и кнопку.
<template>
<div class="nav-menu">
<div
v-for="(title, index) in ['not', 'archetecture']"
:class="['accordion__title', {'active': index == activeIndex}]"
:key="`${title}_${title}`"
@click="getCategoriesTitle(title, index)"
>
{{title}}
<div class="switch-btn-wrapper">
<div class="switch-btn" :class="{'switch-on': index == activeIndex}"
@click="getCategoriesTitle(title)">
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
name: 'NavMenu',
data: () => ({
activeIndex: 1,
isActive: false,
}),
computed: {
...mapGetters(['NAV_LINKS', 'NAV_TITLES']),
},
methods: {
...mapMutations(['CHANGE_CURRENT_MENU', 'CHANGE_CURRENT_TITLE']),
getCategoriesTitle(title, index) {
this.CHANGE_CURRENT_TITLE(title)
this.activeIndex = this.activeIndex === index ? this.activeIndex : index
},
getCategoriesItem(navItem) {
this.CHANGE_CURRENT_MENU(navItem)
},
}
}
</script>