推荐用单个 reactive 对象统一管理问卷状态，将题目结构与用户作答内聚于 formstate.questions 中，每题初始化即带 selected/value 等响应式字段，跳转与提交均基于题对象自身字段计算，避免分散状态和额外组装。

用 reactive 维护问卷调查的状态，核心是把「题目结构」和「用户作答」统一建模为响应式对象，而不是分散管理。关键不在“能不能”，而在“怎么组织才不易错、易扩展、好提交”。

题目列表与作答数据要合并在一个 reactive 对象里

不要分开定义 questions: reactive([]) 和 answers: reactive({})。这样容易不同步、难校验、跳转逻辑混乱。推荐结构如下：

• 整个问卷用一个 reactive 包裹，例如 const formState = reactive({ questions: [], current: 0, // 当前题序号 })
• 每道题的数据（含选项）直接带 selected 或 value 字段，比如单选题的选项数组里加 selected: false，简答题字段加 value: ''
• 服务端返回的原始题干不动，但初始化时就给每题“注入”作答字段，避免后期反复 $set 或判断是否存在

题型差异通过字段动态判断，不靠多个 reactive 变量

单选、多选、填空、上传等类型，都存在同一份 questions 数组中。渲染时用 v-if 判断 item.type，而不是为每种题型单独声明 reactive 数据。

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

• 例如：单选题用 v-model="item.selectedOptionId"；多选题用 v-model="item.selectedOptionIds"；文本题用 v-model="item.value"
• 所有这些字段都在初始化时一并写入题对象，保证响应式追踪生效
• 避免在组件内用 ref 或局部 reactive 存答案，否则父级无法统一收集

跳转与保存必须绑定到题对象自身，而非外部索引

“下一题”不是简单 current++，而是根据当前题的 jump_id 或选项的 jump_id 决定去向。作答状态也应随题走：

• 点击选项时，立刻更新该题的 selectedOptionId，并检查该选项是否带 jump_id，有则直接跳转
• 点击“下一题”时，先校验当前题是否必填，再按规则推进：若当前题无跳转，则 current++；若有，则跳转到对应 id 的题
• 所有跳转逻辑都基于题对象的字段计算，不依赖外部 map 或 switch-case 查表

提交前只需遍历 questions，提取有效字段即可

最终提交的数据结构，和初始化时保持一致，不需要额外组装。例如：

• 单选题提交 { id: 13, selected_option_id: 34 }
• 多选题提交 { id: 17, selected_option_ids: [32, 35] }
• 文本题提交 { id: 18, value: "我的回答..." }
• 遍历 formState.questions，对每题 pick 出对应字段，push 到提交数组，干净利落

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！