从您的描述来看，表单数据未能正常“回显”出来的问题可能是由于几个原因造成的。让我们一步步检查并解决问题。 ### 可能的原因及解决办法 1. **`formData` 初始化问题**： - 您初始化 `formData` 的方式似乎不太正确，并且没有考虑到 Vue 中响应式对象更新机制。目前的代码直接将静态对象分配给了 `formData.value`，这可能会导致它不是真正的响应式的。 2. **绑定字段名称匹配不当**： - 确保每个题目类型的选项值与对应的输入控件绑定了正确的属性名（例如：单选框应使用 `v-model` 绑定到唯一的标识符上）。此外，在设置默认值时也需要保证键路径准确无误。 3. **未触发视图更新**： - 如果只是单纯赋值给 `formData` 并期望界面立刻反映出更改的话，有时需要明确告诉 Vue 数据发生了变化，特别是当我们操作非响应式状态的时候。 基于上述分析，请尝试按照下面优化后的版本调整代码： ```html <template> <div id="dynamicForm" class="whole"> <el-form :model="formData" ref="formRef"> <!-- 遍历 questions 渲染对应题型 --> <div v-for="(question, index) in questions" :key="index"> <el-form-item v-if="question.question_type === 1" :label="question.question_text"> <el-radio-group v-model="formData[question.question_code]"> <el-radio v-for="option in question.options" :key="option.option_code" :label="option.option_code">{{ option.option_text }}</el-radio> </el-radio-group> </el-form-item> <el-form-item v-else-if="question.question_type === 2" :label="question.question_text"> <el-checkbox-group v-model="formData[question.question_code]"> <el-checkbox v-for="option in question.options" :key="option.option_code" :label="option.option_code">{{ option.option_text }}</el-checkbox> </el-checkbox-group> </el-form-item> </div> <div class="dibu"> <el-button type="primary" @click="submit">保存</el-button> </div> </el-form> </div> </template> <script lang='ts' setup> import { ref, reactive, onMounted } from 'vue'; const urlParams = new URLSearchParams(window.location.search); const formFields = ref([]); const questions = ref<Array<any>>([]); const formData = reactive<Record<string, any>>({}); const info = ref<Record<string, any>>({}); onMounted(() => { if (urlParams.has('msg')) { let msgObj = JSON.parse(decodeURIComponent(urlParams.get('msg')!)); const clonedQuestions = JSON.parse(JSON.stringify(msgObj.questions)); info.value = msgObj; clonedQuestions.forEach((item, index) => { item.question_text = `${index + 1}、${item.question_text}`; // 根据 question_code 设置初始值至 formData switch(item.question_type){ case 1: formData[item.question_code] = ''; // 单选默认为空字符 break; case 2: formData[item.question_code] = []; // 多选默认为空数组 break; } }); formFields.value = [...clonedQuestions]; questions.value = [...clonedQuestions]; // 回填预设答案 for(const answer of formDataList){ // 修改此处变量名为实际存储答案列表的地方 Object.assign(formData, {[answer.question_code]: answer.option_code}) } console.log('formData:', formData); } }) function submit() { let answers = []; for(let q of questions.value){ if(q.question_type === 1 && formData[q.question_code]){ answers.push({ ...q, option_code: formData[q.question_code]}); } else if(q.question_type === 2 && Array.isArray(formData[q.question_code])){ answers.push({...q, option_code: formData[q.question_code]}); } }; console.log("提交的答案:", JSON.stringify(answers)); } </script> ``` 在这个改进版中， - 我们确保了所有用于显示的选择项都已经被正确定义并在界面上渲染。 - 同时对 `formData` 进行适当的初始化，并通过循环遍历来填充用户先前选择过的答案。 请注意，如果仍然遇到问题，则建议添加一些调试信息打印或者借助浏览器开发者工具查看具体的 DOM 结构和事件监听情况，以便更精确地定位问题所在。 ---