Vue3中v-if无法响应showModal变量变化的问题

你的问题出在对ref变量的赋值方式错误——直接覆盖了ref创建的响应式引用对象，导致Vue无法追踪到变化。

错误代码分析 #

你当前的script代码中，showModal是用ref()创建的响应式变量，但在openEditModal里直接把它赋值为字符串'show'，这相当于把原本的响应式对象替换成了普通字符串，Vue的响应式系统自然无法感知到这个变化：

let showModal = ref('');

const openEditModal = (data) => {
    showModal = 'show'; // 错误：直接覆盖了ref对象
}

修正方案 #

对于ref创建的响应式变量，必须通过修改其.value属性来更新值，这样Vue才能追踪到变化并触发视图更新：

let showModal = ref('');

const openEditModal = (data) => {
    showModal.value = 'show'; // 正确：修改ref的value属性
}

完整修正后的代码 #

Template部分

<template>
    <EditStudentModal v-if="showModal==='show'"/>
    <div v-for="student in prop.students" :key="student.id">
        <StudentItem
            :student="student"
            @editStudent="openEditModal"
        />
    </div>
</template>

Script部分

import { ref } from 'vue';
import EditStudentModal from './EditStudentModal.vue';
import StudentItem from './StudentItem.vue';

export default {
    components: {
        EditStudentModal,
        StudentItem
    },
    props: {
        students: {
            type: Array,
            required: true
        }
    },
    setup(props) {
        let showModal = ref('');

        const openEditModal = (data) => {
            showModal.value = 'show';
        }

        return {
            showModal,
            openEditModal
        }
    }
}

这样修改后，当触发@editStudent事件时，showModal的响应式变化会被Vue捕获，v-if条件会正确触发视图更新，显示EditStudentModal组件。

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