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

我这边有一个场景，需要生成多行的单选按钮，一组单选按钮会有 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

回答

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

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

创建的14个数组内的数组指向的同一个内存下的 [null, null, null] 所以每次修改的都是同一个数据....
改一下就好了...

value值一样了

以上是 VueJs循环生成多行多列使用v-model绑定一个修改同列的其它Radio数据也会被修改 的全部内容， 来源链接： utcz.com/a/33366.html

回到顶部