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

陟上晴明
  • 1.3k

我这边有一个场景,需要生成多行的单选按钮,一组单选按钮会有 3 个选项,一行数据总共 3 组radio组
image.png
我这边使用了 v-forv-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

回复
阅读 1.8k
2 个回答

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

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

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

改一下就好了...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏