Question

我使用了与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>

这里是一个简短的视频：（因为我说过几次，很多次点击都会发生）

https://streamable.com/zpk4m

两个版本均为2.5.17，但我使用laravel全新安装。另外我已经安装了vuex和lodash ...如果这意味着什么

Answer 1

在我的案例中，答案是元素重复：

我的标签元素是：

<div class="form" v-if="activetab === 2">
     <slot name="messages"></slot>
</div>

对于我使用的广告位：

<div class="form" slot="messages">

</div>

我重复了相同的元素并导致崩溃：D

nextTick中的错误：Vue中的“ TypeError：无法读取未定义的属性'键'”

1 个答案: