使用v-model时Vue 3弹窗始终处于打开状态的问题求助

你遇到的问题是因为用普通对象包裹ref，导致v-model没有正确绑定到ref的value值上，弹窗无法感知状态变化，所以即使设置为false也会持续显示。

方案1：使用reactive创建响应式弹窗状态对象 #

这是更简洁的方式，直接用reactive创建包含所有弹窗状态的响应式对象，不需要为每个属性单独用ref：

<template>
  <v-dialog v-model="modals.add_directory">
    test dialog
  </v-dialog>
  <!-- 示例触发按钮 -->
  <button @click="open_modal('add_directory')">打开目录弹窗</button>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

// 用reactive创建响应式状态对象
const modals = reactive({
  add_directory: false,
  add_lvm: false,
  add_lvmthin: false,
  add_nfs: false,
  add_smbcifs: false,
  add_cephfs: false,
  add_rbd: false,
  add_zfs: false,
});

// 通用弹窗切换函数，用类型约束确保传入合法的弹窗名称
const open_modal = (modalName: keyof typeof modals) => {
  console.log(modals[modalName]);
  modals[modalName] = !modals[modalName];
};
</script>

方案2：保留ref但用reactive包裹状态对象 #

如果一定要为每个弹窗状态单独用ref，需要把modals用reactive包裹，并且在v-model中明确绑定ref的value属性：

<template>
  <v-dialog v-model="modals.add_directory.value">
    test dialog
  </v-dialog>
  <button @click="open_modal('add_directory')">打开目录弹窗</button>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

// 用reactive包裹包含ref的对象，确保整体响应式
const modals = reactive({
  add_directory: ref(false),
  add_lvm: ref(false),
  add_lvmthin: ref(false),
  add_nfs: ref(false),
  add_smbcifs: ref(false),
  add_cephfs: ref(false),
  add_rbd: ref(false),
  add_zfs: ref(false),
});

const open_modal = (modalName: keyof typeof modals) => {
  console.log(modals[modalName].value);
  modals[modalName].value = !modals[modalName].value;
};
</script>

问题根源 #

你之前的代码中，modals是普通对象，里面的ref不会被Vue自动解包，v-model实际绑定的是ref对象本身而不是它的value属性，导致弹窗无法正确识别状态变化，所以即使设置value为false，弹窗也不会关闭。

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