Vue中数组循环添加单选框问题

article/2025/11/5 23:06:02

前言

今天在写一个通过v-for来循环数组，并且在每一条数据中添加单选框功能。然后这边的写法与正常添加单选框参数有点不一样，如下。

1、常规情况下添加单选框：

<body><div id="example-4">====================正常添加单选框====================<br><input type="radio" id="one" value="One" v-model="picked1"><label for="one">One</label><br> <input type="radio" id="two" value="Two" v-model="picked1"><label for="two">Two</label></div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">new Vue({el: '#example-4',data: {picked1: '',}})
</script>
</html>

结果如下：
可以正常操作

2、通过v-for循环情况下添加单选框：

（1）问题误区：不能直接按照正常的情况下编辑 ~~id value for~~ 三个参数

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><div id="example-4">====================通过vue数组循环添加单选框====================<br><div v-for="item in sum"><input type="radio" id="item.order" value="item.value" v-model="picked2"><label for="item.order">{{item.value}}</label></div></div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">new Vue({el: '#example-4',data: {picked2: '',sum: [{ order: "one",value: "One"},{ order: "two",value: "Two"}]}})
</script>
</html>

结果如下：当你随便选择一个单选框时，所有的单选框都会被选中。
不能正常操作

（2）解决方案：需要在 id value for 前面都添加一个冒号，例如： “:id” “:value” ":for"

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><div id="example-4">====================通过vue数组循环添加单选框====================<br><div v-for="item in sum"><input type="radio" :id="item.order" :value="item.value" v-model="picked2"><label :for="item.order">{{item.value}}</label></div></div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">new Vue({el: '#example-4',data: {picked2: '',sum: [{ order: "one",value: "One"},{ order: "two",value: "Two"}]}})
</script>
</html>