为什么 Vue 的点击事件只能执行一次？单击事件一次有效，但不再有效

Question

为什么 Vue 的点击事件只能执行一次？单击事件一次有效，但不再有效。

我创建了一个点击事件，它将打开一个模态组件，点击事件工作一次并停止。 我正在使用 Tailwind 作为第三方库

Answer 1

Modal.vue

    <template>
  <div class="modal" v-if="isModalActive == true">
    <div class="modal-wrapper shadow-md rounded-sm">
      <CloseIcon
        class="absolute right-5 top-5 w-[30px] h-[30px] text-gray-500 hover:text-red-400 cursor-pointer"
        @click="isModalActive = false"
      />
      <div class="modal-body">
        <div class="modal-intraday-updates p-10">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CloseIcon from "./icons/CloseIcon.vue";

export default {
  name: "Modal",
  components: {
    CloseIcon,
  },
  props: {
    isModalActive: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

//首页.vue

<template>
  <Modal :isModalActive="isModalActive" @close="isModalActive = false">
    <h1>Modal Content</h1>
  </Modal>
  <span @click.prenvet="openModal" class="cursor-pointer">OPEN MODAL</span></template>

<script setup>
import Modal from "../components/Modal.vue";

const isModalActive = ref(false);
const openModal = () => {
  isModalActive.value = true;
};
</script>

这就是我正在做的。