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

今天在写一个通过v-for来循环数组，并且在每一条数据中添加单选框功能。然后这边的写法与正常添加单选框参数有点不一样，如下。1、常规情况下添加单选框：<body><div id="example-4">====================正常添加单选框====================<br><input type=...

Aladdin99

6992人浏览 · 2019-09-22 10:30:18

Aladdin99 · 2019-09-22 10:30:18 发布

前言

今天在写一个通过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>

结果如下：功能跟正常情况下一样。

可以正常操作

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^