我这边有一个场景,需要生成多行的单选按钮,一组单选按钮会有 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
去填充了数据...创建的14个数组内的数组指向的同一个内存下的
[null, null, null]
所以每次修改的都是同一个数据....当一个对象被传递给
fill
方法的时候, 填充数组的是这个对象的引用。改一下就好了...