主要问题：
Proxy 对象的外层有数据，但其内部的目标对象（[[Target]]）属性为空。
解决方案：
①确保通过 reactive 和 ref 的正确操作
//修改数据时，应确保是通过响应式方法操作 Proxy 对象的字段，而不是直接替换或覆盖整个对象。
// 正确方式
form.name = "新的任务名称";
form.status = "已分配";
form.type = "交通出行";
// 错误方式
Object.assign(form, newData); // 直接覆盖可能导致响应式丢失②使用 toRaw 或 shallowReactive
// 在某些情况下，你需要明确操作目标对象的原始值，可以使用 toRaw 或 shallowReactive：
import { toRaw } from 'vue';// 查看目标对象
console.log(toRaw(form)); // 输出原始对象内容// 正确更新目标对象
Object.assign(toRaw(form), newData);
③保持字段同步
//当表单弹窗需要初始化时，可以显式地遍历字段并同步数据
const syncForm = (data) => {Object.keys(form).forEach((key) => {if (key in data) {form[key] = data[key];} else {form[key] = ""; // 重置其他字段}});
};// 示例：在数据传入时
syncForm({name: "新任务",status: "待分配",type: "交通出行",place: "城市",executor: "张三",
});
④检查表单初始化
// 如果是在弹窗初始化时绑定数据，确保调用方法如 syncForm 或者直接设置表单字段：
watch(() => taskStore.currentTask, (newTask) => {if (newTask) {Object.assign(form, newTask); // 确保每次弹窗打开时同步}
}, { immediate: true });
⑤使用 ref 而非 reactive
//如果表单是动态的，且字段内容会频繁更新，可以考虑使用 ref 而不是 reactive：
const form = ref({name: "",status: "",type: "",place: "",executor: "",time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});// 更新数据
form.value = { ...form.value, name: "新任务名称" };
应用：
import { defineStore } from "pinia";
export const useTaskStore = defineStore("task", {state: () => {return {tasks: [] // 存储任务的数组};},actions: {// 添加任务addTask(task) {this.tasks.push(task); // 将新任务添加到任务列表console.log("任务已添加: ", task);},// 更新任务updateTask(updatedTask) {const index = this.tasks.findIndex((task) => task.name === updatedTask.name);if (index !== -1) {this.tasks[index] = updatedTask;console.log("任务已更新: ", updatedTask);}},}
});
<template><popUp :Width="'400px'" :Height="'400px'" ref="increaseRef" :Title="'添加'" :isShow="popupRoute" @close="handleClose"><el-form :model="form" :rules="rules" ref="formRef"><el-form-item label="名称" prop="name"><el-input v-model="form.name" placeholder="请输入名称"></el-input></el-form-item><el-form-item label="执行场所" prop="place"><el-input v-model="form.place" placeholder="请输入执行场所"></el-input ></el-form-item><el-form-item class="search-right"><el-button type="primary" class="addBtn" @click="submitForm">提交</el-button></el-form-item></el-form></popUp>
</template><script setup>
import dayjs from 'dayjs';
import { ref, reactive, watch } from 'vue';
import DownSelect from '@/components/elementPlus/downSelect.vue';
import InputBlack from '@/components/elementPlus/inputBlack.vue';
import BtnBlue from '@/components/elementPlus/btnBlue.vue';
import popUp from "@/components/popUp.vue";
import { useTaskStore } from "@/stores/task.js";// 引入 store
const taskStore = useTaskStore();
const increaseRef = ref(null);// 监听弹窗状态
const popupRoute = computed(() => {if (taskStore.Append && increaseRef.value) {increaseRef.value.showPopup();}
});// reactive定义表单数据
const form = reactive({name: "",place: "",// ...其他字段time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});// 表单验证规则
const rules = reactive({name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],place: [{ required: true, message: "请输入任务地点", trigger: "blur" }],
// ...其他字段验证
});const formRef = ref(null);// 表单数据同步逻辑
const syncForm = (task) => {if (task) {// 逐字段赋值，确保 Vue 响应式能检测到form.name = task.name || "";form.place = task.place || "";form.time = task.time || dayjs().format("YYYY-MM-DD HH:mm:ss");// ...其他字段同步赋值} else {form.name = "";form.place = "";form.time = dayjs().format("YYYY-MM-DD HH:mm:ss");// ...其他字段}
};// 打开弹窗时初始化表单数据
const handleOpen = () => {syncForm(taskStore.currentTask);
};// 监听当前任务 taskStore.currentTask 的变化，同步表单字段
watch(() => taskStore.currentTask, (newTask) => {syncForm(newTask);
});// 关闭弹窗
const handleClose = () => {taskStore.setAppend(false);formRef.value?.resetFields();
};// 提交表单逻辑
const submitForm = async () => {formRef.value.validate(async (valid) => {if (valid) {console.log("提交前表单数据：", { ...form });if (taskStore.currentTask) {//编辑taskStore.updateTask({ ...form });} else {//添加taskStore.addTask({ ...form });}await nextTick();console.log("提交后表单数据：", { ...form });handleClose();} else {console.log("表单验证失败");}});
};
</script>
<style lang="scss">
.search-right {.el-form-item__content {justify-content: flex-end;}
}
</style>
<style lang="scss" scoped>
.el-form-item {margin-bottom: 15px;
}.addBtn {width: 100%;max-width: 120px;
}
</style>
总结与改进：
- 避免直接覆盖
reactive对象，确保数据通过响应式更新。 - 使用
toRaw检查是否是响应式代理问题。 - 使用
syncForm或遍历字段确保字段初始化时同步。 - 考虑是否需要切换到
ref以简化响应式操作。