问题

在项目中，使用v-for生成多个el-radio-group，并用一个由ref组成的数组benefitRadio，来作为多个radio group的v-model。每个group在绑定时，用item的id属性来指定绑定值的下标。

界面代码如下：

 1       
 2         
for="item in this.benefitTable" :key="item.id">
 3           
{{ item.question }}
 4           group
 5             v-model="benefitRadio[item.id]"
 6             @change="handleRadioGroup($event, item.id)"
 7           >
 8             0
 9             1
10             2
11             3
12             4
13           
14         
15       

绑定值数组benefitRadio初始化代码如下：

1     let benefitRadio = [];
2     for (let i = 0; i < 15; i++) {
3       benefitRadio.push(ref(-1));
4     }

数组的每一项都是一个ref对象，初始化为-1，使得单选组在刚刚出现时，每个选项都处于未选中的状态。

但是，在点击选项之后，选项并不会变成正常的被选中状态，直到上下滚动或者前后页切换一下，选项的状态才会更新。

解决过程

起初用网上的方法，在radio group的@change事件函数中，增加this.$forceUpdate();

1     handleRadioGroup($event, id) {
2       console.log("radio-group changed:", $event, id);
3       this.$forceUpdate();
4       //todo
5     },

但情况丝毫没有变化。@change函数在我的项目中是用不到的，理论上应该使用v-model绑定就足够。所以我想到可能是绑定值的问题。浏览器控制台的报错也基本能证明这一点，报错说v-model的值应该是bool,string,int，而不能是个对象。所以，我将绑定值作为单个ref对象，而把整个list放到一个ref里。

最终，初始化绑定值的代码如下：

1     let benefitRadio = [];
2     for (let i = 0; i < 15; i++) {
3       benefitRadio.push(-1);
4     }
5     benefitRadio = ref(benefitRadio);

成功解决问题，选项在点击之后就能变为被选中状态。