uni-app实现简单的问卷调查 uni-app多选题与单选题逻辑-uni-app-PHP中文网

uni-app中单选题需用包裹并绑定v-model，值为字符串/数字；多选题须手动同步e.detail.value到数组并显式设置checked；提交前按类型校验空值，注意跨平台差异。

uni-app实现简单的问卷调查 uni-app多选题与单选题逻辑

uni-app中单选题如何绑定数据并响应选择

单选题的核心是让同一组选项共享一个 v-model，且每个选项的 value 值互不相同。uni-app 的必须配合使用，否则无法触发双向绑定。

常见错误：直接用 v-model 绑定到上（无效），或忘记给设置 name（部分平台如 H5 可能不报错但逻辑异常）。

必须用包裹所有
{{ item.label }} 中的 :value 要是字符串或数字（避免布尔/对象）
初始值建议设为 '' 或 null，而不是 undefined，否则某些平台（如微信小程序）可能无法正确回显
在 onRadioChange 里通过 e.detail.value 获取选中值，不是 e.target.value

<radio-group><label v-for="item in options" :key="item.value">
    <radio :value="item.value"></radio>
    {{ item.label }}
  </label>
</radio-group>

uni-app多选题怎么避免数组重复添加和状态错乱

多选题没有原生的 v-model 自动同步机制（uni-app 的仅触发事件，不自动更新数组），必须手动维护选中项数组。

典型问题：点击同一选项多次导致重复 push；取消勾选时未从数组中移除；初始渲染时 checkbox 未根据已有数据设置 checked 状态。

用 checkbox-group @change="onCheckboxChange" 监听，e.detail.value 是当前所有被勾选的 value 字符串数组
不要用 push/splice 手动增删，直接把 e.detail.value 赋值给你的响应式数组（如 this.selectedList = e.detail.value）
必须显式设置 :checked="selectedList.includes(item.value)"，否则初始态或切换后 UI 不同步
确保 item.value 是唯一可比类型（推荐字符串或数字），避免用对象作为 value

<checkbox-group><label v-for="item in options" :key="item.value">
    <checkbox :value="item.value" :checked="selectedList.includes(item.value)"></checkbox>
    {{ item.label }}
  </label>
</checkbox-group>

提交前校验单选/多选题是否作答的通用写法

问卷提交不能只靠前端提示，但至少得拦截明显漏答。单选题判空看是否为 '' 或 null；多选题看数组长度是否为 0，但要注意「允许不选」和「必选」逻辑要分开处理。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

容易忽略点：表单里混有单选、多选、输入框时，校验逻辑分散易遗漏；使用 ref 手动聚焦失败（uni-app 中 focus() 在部分平台不生效）。

把每道题的字段名（如 q1, q2_options）和校验规则（required: true）存在一个配置数组里，统一遍历
单选字段：用 !this.formData.q1 判空（注意排除 0 这类合法值，可改用 ['', null, undefined].includes(this.formData.q1)）
多选字段：用 this.formData.q2_options.length === 0，别用 !this.formData.q2_options（数组永远真值）
发现未答时，用 uni.showToast({ title: '第2题未作答', icon: 'none' }) 提示，不强行跳转或弹窗阻塞

不同平台下 radio/checkbox 样式与事件行为差异

uni-app 编译到微信小程序、H5、App 时，和的默认样式、点击热区、change 触发时机并不一致。比如 H5 下 label 包裹 radio 可点击整个区域，而小程序中只有 radio 圆圈本身响应，需额外加 style="display: flex; align-items: center" 优化体验。

最常踩的坑：在微信小程序真机调试时，@change 事件偶尔不触发 —— 多半是因为没有包裹完整，或内部嵌套了非元素（如），导致编译后结构异常。