Я использовал тот же подход, что и здесь, чтобы сделать что-то подобное, но когда я нажимаю кнопки, иногда это происходит сразу же после 20 кликов....
Вот мой код: (Внутри файла.vue)
<template>
<div class="right-bar" :class="{'hide':!open}">
<div class="header-bar">
<button @click="changeTab(1)" class="hbm" :class="[ activetab === 1 ? 'active' : '' ]">
<i class="fas fa-tachometer-alt"></i>
</button>
<button @click="changeTab(2)" class="hbm" :class="[ activetab === 2 ? 'active' : '' ]">
<i class="fas fa-comments"></i>
</button>
<button @click="changeTab(3)" class="hbm" :class="[ activetab === 3 ? 'active' : '' ]">
<i class="fas fa-bell"></i>
</button>
<button @click="changeTab(4)" class="hbm" :class="[ activetab === 4 ? 'active' : '' ]">
<i class="fas fa-cog"></i>
</button>
<i class="fas rs-btn" :class="[open?'fa-chevron-down':'fa-chevron-up']" @click.prevent="open=!open"></i>
</div>
<div class="content-form">
<div class="form" v-if="activetab === 1">
<slot name="overview"></slot>
</div>
<div class="form" v-if="activetab === 2">
<slot name="messages"></slot>
</div>
<div class="form" v-if="activetab === 3">
<slot name="notifications"></slot>
</div>
<div class="form" v-if="activetab === 4">
<slot name="settings"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
open: true,
activetab: 1
}
},
methods: {
changeTab(i) {
this.activetab = i;
}
}
};
</script>
Вот видеоролик о нем: (потому что, как я уже говорил несколько раз, это случается в несколько раз за клики)
Обе версии - 2.5.17, но я использую один с новой версией laravel. Также я установил vuex и lodash... если это что-то значит
Ответ в моем случае - дублирование элементов:
Элемент моей вкладки:
<div class="form" v-if="activetab === 2">
<slot name="messages"></slot>
</div>
и для слота я использовал:
<div class="form" slot="messages">
</div>
Я продублировал один и тот же элемент и вызвал сбой: D
v-for
внутри некоторых вкладок, поэтому вы задаете атрибутkey
для повторяющихся узлов, чтобы предоставить уникальный ключ Vue для управления собственным кешем с этими узлами. Проверьтеkey
вы устанавливаете во вкладках, измените его значение для каждой вкладки и проверьте, сохраняется ли он, например:key="'tab-1-' + item.id"