如下图一,现在需要做一个单选框的功能。思路:for循环,将所有变成false,让当前变成true。在创建arr的过程中,先有name这个属性。然后利用for循环给arr的每一项添加一个状态。点击的时候,让arr中每一项的状态都变成false,让当前的状态变为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<table>
<tr>
<th>姓名</th>
<th>操作</th>
</tr>
<tr v-for="item,index in arr">
<td>{{item.name}}</td>
<td>
<input type="checkbox" v-model="item.status" @click="inputShow(index)" style="zoom:150%;">
</td>
</tr>
</table>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
arr:[
{
name :'小黄'
},
{
name :'小明'
},
{
name :'小红'
}
]
},
created:function() {
this.getArr()
},
methods:{
getArr() {
for (var i = 0; i < this.arr.length; i++) {
this.arr[i].status = false
}
},
inputShow (item) {
for (var i = 0; i < this.arr.length; i++) {
this.arr[i].status = false
}
item.status = true
console.log(this.arr)
}
}
})
</script>
</body>
</html>
这里会出现问题。打印出来最终的arr,status是对的,但是页面中的checkbox的状态有问题?
原因就出在for循环中对arr进行的赋值操作。
在vue文档中有这样一段话。
Vue 不能检测到对象属性的添加或删除。
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
将for循环中的代码改为 this.$set(this.arr[i],'status', false)即可