Vue3组合API中列表传递给模态框的对象属性不显示

问题根源 #

你遇到的问题确实和Vue3的响应式模型有关：模态框组件中，selectedItem是用reactive创建的响应式对象，但在showModal方法里直接执行selectedItem = cloneDeep(item)，这会切断原响应式引用。

reactive的响应式是绑定在初始创建的对象上的，当你给selectedItem变量重新赋值时，它会指向一个cloneDeep生成的普通对象（非响应式代理），模板中的绑定无法追踪这个新对象的变化，所以字段显示为空。

修复方案 #

有两种可靠的修复方式：

方案1：用Object.assign合并属性（保留原响应式对象）

修改模态框组件的showModal方法，不要直接替换selectedItem，而是把新对象的属性合并到原响应式对象中：

import { cloneDeep } from 'lodash'; // 确保已引入cloneDeep

function showModal(item) {
  const clonedItem = cloneDeep(item);
  // 合并属性到原响应式对象，保留响应式
  Object.assign(selectedItem, clonedItem);
  isModalVisible.value = true;
}

方案2：将selectedItem改为ref（支持重新赋值）

如果更倾向于直接赋值的写法，可以把reactive换成ref，因为ref的响应式是通过.value维护的，重新赋值不会丢失响应性：

// 替换原selectedItem的定义
const selectedItem = ref({
  fbReqtypeid: '',
  listItem: '',
  type: '',
  link: '',
  digits: '',
  typeName: '',
  genericName: '',
  singleLineText: '',
  multiLineText: ''
})

// 修改showModal方法
function showModal(item) {
  selectedItem.value = cloneDeep(item);
  isModalVisible.value = true;
}

// 模板中不需要修改，Vue会自动解包ref

额外验证 #

修复后，可以在showModal方法里打印selectedItem，确认它仍然是Vue的响应式代理对象（方案1）或ref对象（方案2），这样模板就能正确渲染字段值了。

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