Vuetify编辑表单中单选按钮选中值无法回显的解决方法

针对你遇到的单选按钮无法回显选中状态的问题，可以从以下几个方面排查解决：

1. 确保ContractModel的type_contract初始值匹配单选框value #

检查ContractModel类的构造函数，确认type_contract的初始值是"direct"或"contingency"中的一个，而非null、undefined或其他不匹配的内容。如果后端返回的待编辑数据中type_contract的值和单选框的value不一致（比如后端返回"DIRECT"而单选框是"direct"），也会导致无法选中。

示例修正后的ContractModel：

class ContractModel {
  constructor() {
    // 初始化匹配单选框value的默认值，或后续从后端数据赋值
    this.type_contract = ""; 
  }
}

2. 验证编辑时的数据赋值逻辑 #

点击编辑按钮填充待编辑数据时，要确保将正确的type_contract值赋值给dataItem，且值的类型与单选框value严格一致（必须是字符串类型，不能是数字、布尔值等）。

示例正确的赋值逻辑：

// 假设editRow是选中的待编辑行数据
this.dataItem = Object.assign(new ContractModel(), editRow);
// 若后端返回值格式不匹配，需手动转换
this.dataItem.type_contract = editRow.type_contract.toLowerCase();

3. 确认数据的响应式 #

确保dataItem是Vue的响应式数据，且type_contract属性被Vue正确追踪。如果ContractModel的属性是动态添加的，需要使用Vue.set来确保响应式：

Vue.set(this.dataItem, 'type_contract', editRow.type_contract);

快速验证方法 #

在控制台打印this.dataItem.type_contract，检查其值是否为"direct"或"contingency"，同时确认类型为字符串。如果手动给dataItem.type_contract赋值后单选框能选中，说明问题出在数据赋值环节；若仍无法选中，则需要检查组件绑定是否有误。

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