vue3使用v-for生成多個el-radio-group時，數據的綁定問題

問題

在項目中，使用v-for生成多個el-radio-group，並用一個由ref組成的數組benefitRadio，來作為多個radio group的v-model。每個group在綁定時，用item的id屬性來指定綁定值的下標。

界面代碼如下：

      <el-scrollbar height="450px" :always="true">
        <div v-for="item in this.benefitTable" :key="item.id">
          <div class="ques-text">{{ item.question }}</div>
          <el-radio-group
            v-model="benefitRadio[item.id]"
            @change="handleRadioGroup($event, item.id)"
          >
            <el-radio :label="0">0</el-radio>
            <el-radio :label="1">1</el-radio>
            <el-radio :label="2">2</el-radio>
            <el-radio :label="3">3</el-radio>
            <el-radio :label="4">4</el-radio>
          </el-radio-group>
        </div>
      </el-scrollbar>

綁定值數組benefitRadio初始化代碼如下：

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

數組的每一項都是一個ref對象，初始化為-1，使得單選組在剛剛出現時，每個選項都處於未選中的狀態。

但是，在點擊選項之后，選項並不會變成正常的被選中狀態，直到上下滾動或者前后頁切換一下，選項的狀態才會更新。

解決過程

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

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

但情況絲毫沒有變化。@change函數在我的項目中是用不到的，理論上應該使用v-model綁定就足夠。所以我想到可能是綁定值的問題。瀏覽器控制台的報錯也基本能證明這一點，報錯說v-model的值應該是bool,string,int，而不能是個對象。所以，我將綁定值作為單個ref對象，而把整個list放到一個ref里。

最終，初始化綁定值的代碼如下：

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

成功解決問題，選項在點擊之后就能變為被選中狀態。