VueJs循环生成多行多列使用v-model绑定一个修改同列的其它Radio数据也会被修改

Question

我这边有一个场景，需要生成多行的单选按钮，一组单选按钮会有 3 个选项，一行数据总共 3 组radio组

我这边使用了 v-for 套 v-for 的方式去生成了以上布局，以下是一段Vue伪代码

<template>
    <div v-for="(num,index) in 8" :key="'row-'+index">
      <div v-for="(n,i) in 3" :key="'col-'+index + '-' + i">
        <span
          v-for="ra in radios"
          :key="'label-'+index + '-' + i + '-' + ra.value"
        >
          <input
            type="radio"
            :name="'radio-' + index + '-' + i"
            :value="ra.value"
            v-model="ball[index][i]"
            @click="handleClick(index,i,ra.value)"
          />
          {{ index + '/' + i }}
          {{ ra.label }}
        </span>
      </div>
    </div>
</template>

在点击其中一个 Radio 时会影响整个一列其它行的 Radio 数据，一个类似同步选择的效果，可以在最后的CodePen复现上看到我说的现象。

如果不用 v-model 绑定，而是用@click去接收处理数据就没有问题。

最后附上线上复现地址：
CodePen Demo

Answer 1

昂...刚刚发完问题，就被小伙伴解决了，我这边创建数组使用的 .fill 去填充了数据...

      ball: new Array(8).fill([null, null, null])

创建的14个数组内的数组指向的同一个内存下的 [null, null, null] 所以每次修改的都是同一个数据....
当一个对象被传递给 fill 方法的时候, 填充数组的是这个对象的引用。

改一下就好了...

Answer 2

value值一样了