как вставить только один 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>

Ответы (0 шт):