Vue分页表单混用复选框与单选框时值异常问题排查

问题根源 #

问题出在Vue的表单元素复用与响应式数据绑定逻辑上：

• 分页切换时，Vue会复用之前渲染的radio/checkbox组件，而非重新创建
• 单选框（radio）的v-model绑定单个值（字符串/数字），复选框（checkbox）绑定数组，两种类型的绑定值共用同一个全局变量checkedNames时，切换场景会导致旧值残留
• 未为每个问题单独维护答案状态，切换分页时没有根据当前问题类型重置或替换绑定值

修复方案 #

1. 为每个问题单独存储答案（推荐方案） #

将全局的checkedNames改为对象，以问题ID为键分别存储每个问题的选中值，从根源上避免值类型冲突和数据混乱：

<script setup>
import { ref } from 'vue'

const currentPage = ref(1)
// 改为对象结构，每个问题对应独立的答案存储
const checkedAnswers = ref({})
const questions = [
  {
    id: 1,
    type: 'radio',
    options: ['选项A', '选项B', '选项C']
  },
  {
    id: 2,
    type: 'radio',
    options: ['选项1', '选项2', '选项3']
  },
  {
    id: 3,
    type: 'checkbox',
    options: ['苹果', '香蕉', '橙子']
  }
]

// 获取当前问题的选中值，自动初始化对应类型的默认值
const getCurrentChecked = () => {
  const currentQuestion = questions[currentPage.value - 1]
  if (!checkedAnswers.value[currentQuestion.id]) {
    // 单选默认空字符串，多选默认空数组
    checkedAnswers.value[currentQuestion.id] = currentQuestion.type === 'radio' ? '' : []
  }
  return checkedAnswers.value[currentQuestion.id]
}
</script>

<template>
  <div>
    <h3>第{{ currentPage }}题</h3>
    <div v-if="questions[currentPage - 1].type === 'radio'">
      <label v-for="option in questions[currentPage - 1].options" :key="option">
        <input
          type="radio"
          :value="option"
          v-model="getCurrentChecked()"
        >
        {{ option }}
      </label>
    </div>
    <div v-else>
      <label v-for="option in questions[currentPage - 1].options" :key="option">
        <input
          type="checkbox"
          :value="option"
          v-model="getCurrentChecked()"
        >
        {{ option }}
      </label>
    </div>
    <button @click="currentPage = Math.max(1, currentPage - 1)" :disabled="currentPage === 1">上一页</button>
    <button @click="currentPage = Math.min(questions.length, currentPage + 1)" :disabled="currentPage === questions.length">下一页</button>
    <p>当前选中：{{ getCurrentChecked() }}</p>
    <p>所有问题答案：{{ checkedAnswers }}</p>
  </div>
</template>

2. 强制组件重新渲染（临时应急方案） #

如果不想修改数据结构，可以通过key属性强制Vue在分页切换时销毁并重建表单区域，避免元素复用：

<template>
  <!-- 用currentPage作为key，切换分页时强制重新渲染表单 -->
  <div :key="currentPage">
    <h3>第{{ currentPage }}题</h3>
    <!-- 原表单渲染代码 -->
  </div>
</template>

注意：此方案会带来额外的组件销毁/重建开销，仅适合简单场景，不推荐作为长期解决方案。

关键说明 #

• 单选和复选框的v-model绑定值类型天然不同，共用变量会导致类型冲突和数据残留
• 为每个问题单独维护答案状态，既解决了分页切换的混乱问题，也更符合表单数据的存储逻辑，便于后续批量提交所有答案

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