this.$set小例子

最新推荐文章于 2024-07-20 17:18:04 发布

cofecode

最新推荐文章于 2024-07-20 17:18:04 发布

阅读量1.4w

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/cofecode/article/details/79133293

版权

Vue.js 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

如下图一，现在需要做一个单选框的功能。思路：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

此时用set方法就能解决问题

将for循环中的代码改为 this.$set(this.arr[i],'status', false)即可

cofecode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
this.$set小例子

如下图一，现在需要做一个单选框的功能。思路：for循环，将所有变成false，让当前变成true。在创建arr的过程中，先有name这个属性。然后利用for循环给arr的每一项添加一个状态。点击的时候，让arr中每一项的状态都变成false,让当前的状态变为true Document 姓名操作 {{item.name}}
复制链接

扫一扫

专栏目录