uniapp初识 | 根据参数动态重置radio的选中状态

目标场景

当用户进入英语选择题的答题界面时，能够自动勾选该用户曾经提交的选项。
如下图所示的一道选择题，用户曾经提交过答案，因此当用户再次进入该页面时，自动勾选B选项。点击【下一题】时同理。

代码示例

// 提问内容（question表示的是一个对象）
{{question.content}}
// 4个选项
<radio-group @change="radioChange">
		<view v-for="(choice, index) in question.choice_list">
		    // choice.value表示的是选项A、B、C、D；而userAnswer表示的是用户曾经提交的选项
			<radio:value="choice.value" :checked="choice.value===userAnswer">
			   // 选项内容
				<text>{{optional.content}}</text>
			</radio>
		</view>
</radio-group>


<script>
export default {
		data() {
			return {
				// 定义变量
				userAnswer: ''
			}
		},
		onLoad() {
		   // 查询用户历史答题记录
			this.getHistoryData()
		},
		methods: {
			getHistoryData() {
				// 1、假设这里通过uniCloud查询得到用户的历史提交答案是B
				this.userAnswer= 'B'
			}
		}
}
</script>

切换Radio重置状态问题

问题背景

在上图的基础上，切换A选项，然后点击下一题，会发现原本应该没有答案的下一题，即两个选项应该都是未勾选状态，此时A选项却被勾选了；然后切换回原题，竟然A、B两个选项都被勾选了！

再切换回原题

解决方案

在radioChange函数中，将选中选项的状态值同步给userAnswer。

radioChange(evt) {
	let optionalId = evt.target.id;
	let optionalValue = evt.detail.value;
	this.userAnswer= optionalValue;
}

拓展说明

这里展示的只是一个选择题，如果是多个选择题呢？
答案是：将userAnswer转变为数组形式。