我使用了与 here 相同的方法制作类似的东西,但当我点击按钮时,有时它会立即发生,有时会在点击 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
关于javascript - nextTick : "TypeError: Cannot read property ' key' of undefined"in vue 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52795026/