[英]Error in nextTick: “TypeError: Cannot read property 'key' of undefined” in vue
I used same approach as here to make something similar but when ever I click on buttons sometimes it happens right away sometimes after 20 clicks.... 我使用了与此处相同的方法来制作相似的东西,但是每当我单击按钮时,有时都会在单击20次后立即发生。
Here is my code: (Inside .vue file) 这是我的代码:(在.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>
Here is a quick video of it: (because as I said some times it happens in few some times in lot clicks) 这里是一个简短的视频:(因为我说过几次,很多次点击都会发生)
https://streamable.com/zpk4m https://streamable.com/zpk4m
Both versions are 2.5.17 but I use one with laravel fresh installation.. Also I have installed vuex and lodash... if it means something 这两个版本都是2.5.17,但是我使用laravel全新安装。.另外,我已经安装了vuex和lodash ...
Answer in my case was duplication of elements: 就我而言,答案是元素重复:
My tab element is: 我的标签元素是:
<div class="form" v-if="activetab === 2">
<slot name="messages"></slot>
</div>
and for slot I used: 对于我使用的广告位:
<div class="form" slot="messages">
</div>
I duplicated same element and caused which caused crashing :D 我复制了相同的元素并导致崩溃:D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.