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

news/2024/7/10 1:54:33 标签: Vue, 单选框

前言

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