时间戳

首页 > 解决方案 > 基于单击 Vuejs 中的按钮显示/隐藏警报

html - 基于单击 Vuejs 中的按钮显示/隐藏警报

问题描述

我的注册组件中有一个警报（snackbar），我只想在属性activeSection等于'step-1'. 棘手的部分是我不能直接将小吃栏组件直接调用到我的注册组件中。我只能通过从注册到小吃栏组件发出属性来显示小吃栏。

我编写了一段代码，在页面加载时显示小吃栏，但是当我activeSection通过单击按钮更改属性时，即使我希望它消失，小吃栏也不会消失，最好的方法是什么？

这是registration.js的相关部分：

data: function () {
    return {
      activeSection: "step-1"
.
.
mounted(){
    if (this.activeSection === 'step-1') {
      EventBus.$emit("add-snack", {
        message: "Hello World",
        type: "success"
      });
    }

这是来自snackbar.html 的相关部分：

<button type="button" class="btn btn-primary btn-block btn-300" @click.prevent="activeSection='step-2'">
            CONTINUE
          </button>

请注意，我想观察是否activeSection发生了变化，如果发生了变化，那么我希望我的代码停止发出snackbar 属性。

标签： htmlcssvue.jsemit

解决方案

推荐阅读