VUE给动态生成的el-checkbox添加v-model

需求描述：根据返回的数据，页面动态for循环添加el-checkbox，动态绑定v-model；

html代码：

<el-checkbox 
      class="all-choose"
      v-for="(item,index) in tabList"
      :key="index"
      v-model="item.status"
      @change="ChooseAll(index,item.status)">
       全选
</el-checkbox>

tabList数据格式：

tabList: [
	{
		id: '1',
		name: 'test'
	},
	{
		id: '2',
		name: 'teste2'
	}
]

之前的错误做法：

tabList.forEach((item, index) => {
	item.status = false;
})

开始以为这样就可以了，毕竟在el-checkbox上用item.status绑定v-model，后面发现checkbox点击的时候并没有更新；

解决方案：

import Vue from 'vue'
tabList.forEach((item, index) => {
	// item.status = false;
	Vue.set(item, 'status', '');
})

官方文档
在这里插入图片描述

本文链接：https://blog.csdn.net/LLDD2014425/article/details/105687263

智能推荐

给全景添加动态热点

做一个上图箭头指向的热点信息。打开 tour.xml 文件，找到里的scene ，选择一个你将要添加热点的场景。添加一下代码：这样就做好了如图的几个动态热点图. 注意这里用了动画函数(do_crop_animation(x_width,y_height, time)), 动画函数加载图片时是一帧一帧的顺序是从左向右从上至下… 具体代码包在我的资源处可下载。...

Vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果

Vue如何实现给文字或图标动态施加动画效果，或动态添加hover效果先上效果图看下有可能大家想要实现别的应用动画效果，但是掌握好这个技巧后基本可以适用许多简单的基础动画效果先说下原理，其实这里用到的是vue中两个监听事件，分别是mouseover（鼠标悬停在指定元素上）和mouseout（鼠标离开指定元素后），知道了这两个监听事件后，大家应该已经明白是怎么回事了吧下面上代码可以看到，使...

Vue this.$set给vue对象动态添加新属性，并实时更新视图

语法： this.$set(target, key, value) target为需要添加属性的对象，key是要添加的属性名，一般是字符串形式，也可以是数字，value为属性key对应的值。有时候我们定义在data()方法中的对象，在额外处理的时候可能需要，动态给它添加某些属性，这个时候我们直接 this.obj.xxx = ‘xxx’ 发现这种写法是不行的，视图没有更新...

vue动态添加select中的option

参考：https://www.jb51.net/article/172955.htm 1 2 3 完整js代码: 详解：...