Vue.js中v-if仅首次生效问题求助

首先咱们定位核心问题：第一次关闭模态框后，showAuto的值没有被重置为false。当你第二次点击按钮触发事件时，toShow是true，但showAuto已经是true了，Vue的响应式系统会认为值没有变化，不会重新渲染DOM，所以组件就不会再显示了。

下面是具体的解决步骤：

1. 确保关闭模态框时重置showAuto #

你需要在AutoDeltaSettings组件的关闭逻辑中，通知父组件把showAuto设为false。这里有两种更清晰的方式，比EventBus更可控：

方式一：用组件自定义事件（推荐） #

父组件模板：

<auto-delta-settings v-if="showAuto" @close-modal="showAuto = false"></auto-delta-settings>

AutoDeltaSettings组件的关闭按钮逻辑：

<template>
  <!-- 模态框其他内容 -->
  <button @click="$emit('close-modal')">关闭</button>
</template>

方式二：沿用EventBus方案 #

在AutoDeltaSettings组件的关闭方法中发射事件：

methods: {
  closeModal() {
    EventBus.$emit('hide-advanced-settings')
  }
}

然后在父组件的created钩子中新增监听：

created () {
  EventBus.$on('protocol-changed', this.protocolChanged)
  EventBus.$on('show-advanced-settings', this.showAdvancedSettings)
  // 新增监听关闭事件
  EventBus.$on('hide-advanced-settings', () => {
    this.showAuto = false
  })
}

2. 清理EventBus监听，避免内存泄漏 #

因为你用了v-if，每次组件显示都会触发created注册事件，多次显示后会造成重复监听。记得在组件销毁时移除监听：

beforeDestroy() {
  EventBus.$off('protocol-changed', this.protocolChanged)
  EventBus.$off('show-advanced-settings', this.showAdvancedSettings)
  EventBus.$off('hide-advanced-settings')
}

3. 优化showAdvancedSettings方法（可选兜底） #

如果偶尔出现值未变化导致不渲染的情况，可以强制触发更新（优先解决根本问题，此为兜底方案）：

methods: {
  showAdvancedSettings (toShow) {
    // 先赋值为相反值，确保Vue检测到变化
    this.showAuto = !toShow
    this.$nextTick(() => {
      this.showAuto = toShow
    })
    console.log("To Show - After"+ this.showAuto)
  }
}

最后建议你打开浏览器控制台，第二次点击按钮时查看：

• 触发事件的组件中showAdvancedSettings的值是否正确变为true
• 接收事件的组件中showAuto赋值前后的日志，确认值是否有变化

内容的提问来源于stack exchange，提问作者Mahtab Alam