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', '');
})

官方文檔
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章