Vue Modal弹窗求助：点击按钮无响应，附组件代码

1. Modal容器未绑定显示状态变量 #

你的Modal遮罩层（.modal-overlay）没有通过v-if或v-show与data里的showModal关联，导致点击按钮修改showModal后，Modal没有任何显示/隐藏的变化。

修复方法：给transition内部的.modal-overlay添加条件渲染指令：

<transition name="modal-fade">
  <!-- 添加 v-if="showModal" 绑定显示状态 -->
  <div class="modal-overlay" v-if="showModal" @click="$emit('close-modal')">
    <div class="modal" @click.stop>
      <h6>Saved!</h6>
      <p>Your Details have been saved Successfully</p>
      <button>Go Home</button>
    </div>
    <div class="close" @click="$emit('close-modal')">
      <img class="close-img" src="" alt="" />
    </div>
  </div>
</transition>

2. 按钮点击指令拼写错误 #

你最后提供的按钮代码中，点击指令写成了u/click，这是语法错误，Vue的点击绑定指令应为@click（或完整写法v-on:click）。

修复方法：修正按钮的点击指令：

<div class="save-btn"><button @click="showModal = true">Save</button></div>

3. 关闭逻辑未闭环 #

当前组件通过$emit('close-modal')触发关闭事件，但组件内部没有监听该事件来修改showModal，导致点击关闭按钮/遮罩层时无法隐藏Modal。

修复方法（二选一）：

• 方法一：在组件脚本中监听自定义事件并修改状态

export default {
  data () {
    return {
      showModal: false
    }
  },
  methods: {
    handleCloseModal() {
      this.showModal = false
    }
  },
  created() {
    this.$on('close-modal', this.handleCloseModal)
  }
}

• 方法二：直接在关闭触发处修改showModal（更简洁）

<div class="modal-overlay" v-if="showModal" @click="showModal = false">
  <div class="modal" @click.stop>
    <h6>Saved!</h6>
    <p>Your Details have been saved Successfully</p>
    <!-- 给Go Home按钮也添加关闭逻辑 -->
    <button @click="showModal = false">Go Home</button>
  </div>
  <div class="close" @click="showModal = false">
    <img class="close-img" src="" alt="" />
  </div>
</div>

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