Vue如何选中radio单选框？自定义单选点击无法触发隐藏radio选中怎么解决

问题根因 #

现有代码仅读取了隐藏radio的checked属性值，没有执行赋值操作，因此无法修改元素的选中状态。

修复方案 #

直接给checked属性赋值为true即可，修改后的代码如下：

customRadioHandler(key) {
    this.$refs[key].checked = true;
}

优化建议 #

如果你使用了Vue的v-model绑定radio选中值，更推荐直接修改v-model绑定的响应式变量，无需操作DOM即可实现效果，更符合Vue开发规范：

1. 给同组隐藏radio绑定同一个v-model变量，比如selectedKey
2. 每个radio的value属性设置为对应的key值
3. 点击事件直接修改绑定变量：

customRadioHandler(key) {
    this.selectedKey = key
}

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