用 reactive 管理答题卡选项状态矩阵，即以题号为 key、选项布尔值对象为 value 构建嵌套响应式结构，支持点语法读写、深层响应及批量操作（如清空、回填、校验）。

用 reactive 管理答题卡选项状态矩阵，核心是把“每道题 + 每个选项”的选中状态建模为嵌套响应式对象，而不是用一堆独立的 ref。这样既能保持结构清晰，又可直接通过点语法读写、支持深层响应、便于批量操作（如清空、回填、校验）。

定义二维状态矩阵结构

答题卡通常有固定题号（如 1~10），每题有若干选项（如 A/B/C/D）。适合用 reactive 包裹一个对象，其 key 是题号，value 是该题的选项状态对象：

• 题号作为字符串 key（避免数组索引错位问题，也方便与后端字段对齐）
• 每个题的状态用 { A: false, B: true, C: false, D: false } 这类结构表示单选；若允许多选，值可为 boolean 或 number（如选中数）
• 初始化时统一设为全未选，或按预设数据加载

示例代码：

const answers = reactive({
  '1': { A: false, B: false, C: false, D: false },
  '2': { A: false, B: false, C: false, D: false },
  '3': { A: false, B: false, C: false, D: false }
})

模板中绑定与切换逻辑

在循环渲染题目和选项时，直接用题号和选项字母访问对应布尔值，并绑定 @click 实现单选切换：

• 使用 v-for 渲染题目列表，每题内再 v-for 渲染选项
• @click 中反转当前题当前选项的值，同时将同题其余选项置为 false（单选逻辑）
• 模板里无需 .value，因为 reactive 对象属性天然响应式

示例片段：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

  

{{ q.text }}

  
          type="radio"
      :name="'q' + q.id"
      :checked="answers[q.id][opt]"
      @click="selectOption(q.id, opt)"
    >
    {{ opt }}
  

封装通用操作方法

基于 reactive 的结构优势，可轻松封装复用性强的状态操作函数：

• selectOption(qid, opt)：设置该题仅此选项为 true，其余为 false
• clearQuestion(qid)：重置某题所有选项为 false
• resetAll()：遍历 keys，全部设为初始未选状态
• getSelected(qid)：返回当前题已选的选项字母（如 'B'），用于提交或校验

这些函数内部直接修改 answers[qid][opt]，无需.value，语义自然、性能高效。

配合 computed 提取聚合状态

利用 reactive 的响应性，可派生出更高阶的状态：

• 已答题数：computed(() => Object.keys(answers).filter(qid => Object.values(answers[qid]).some(v => v)).length)
• 是否全部完成：computed(() => completedQuestions.value === questions.length)
• 当前题答案：computed(() => getSelected(currentQid.value))

所有 computed 都会随 answers 内部任意字段变化而自动更新，无需手动触发。

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