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查询得到用户的历史提交答案是Bthis.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转变为数组形式。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！