Question

在我的组件模板中，我使用AutoDeltaSettings组件，我只想显示组件的showAuto数据属性为真。

<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组件显示（基本上是模态），当我关闭模态并再次单击按钮以显示{{ 1}}组件它不起作用。

我已阅读此帖Conditional v-if is working only for the first time?

Vue.js v-如果只是第一次工作

0 个答案: