时间戳

首页 > 解决方案 > Vue.js v-if 仅第一次工作

javascript - Vue.js v-if 仅第一次工作

问题描述

在我的组件模板中，我正在使用 AutoDeltaSettings 组件，我只想showAuto在组件的数据属性为 true 时才显示该组件。

<auto-delta-settings   v-if="showAuto"> </auto-delta-settings>

这是 showAuto 数据属性

data () {
    return {
      stepWidth: STEP_WIDTH,
      headerHeight: HEADER_HEIGHT,
      paddingTop: PADDING_TOP,
      paddingBottom: PADDING_BOTTOM,
      footerHeight: FOOTER_HEIGHT,
      showAuto: false
    }
  }

我已经在创建的钩子上注册了事件

created () {
    EventBus.$on('protocol-changed', this.protocolChanged)
    EventBus.$on('show-advanced-settings', this.showAdvancedSettings)
  }

当发出 show-advanced-settings 事件时，我正在调用组件的 showAdvancedSettings 方法

methods: {
    showAdvancedSettings (toShow) {
      console.log("To Show - Before"+ this.showAuto)
      this.showAuto = toShow
      console.log("To Show - After"+ this.showAuto)
    }
}

我通过单击按钮从另一个组件发出事件

showAdvancedSettingsModal () {
       console.log('Inside advanced settings opener - Before '+ this.showAdvancedSettings)
       this.showAdvancedSettings = true
       console.log('Inside advanced settings opener - After '+ this.showAdvancedSettings)
       EventBus.$emit('show-advanced-settings', this.showAdvancedSettings)
    },

但这仅在我第一次单击按钮时才有效，在这种情况下，AutoDeltaSettings组件显示（基本上是一个模式），当我关闭模式并再次单击按钮以显示AutoDeltaSettings它不起作用的组件时。

我读过这篇文章Conditional v-if is working only for the first time?

标签： javascriptvue.jsvuejs2

解决方案

推荐阅读