vue v-model 数组 checkbox

---

注：【网页版】右上方的悬浮框（ 有目录索引 ）

---

一、选中 数组中有其值的 checkbox

1-1】js 代码

var vue = new Vue({
	el:"#app",
	data:{
		roleqxs:[],
		qxs:[],
		updateQxInfo:[]
	},
	methods:{
		initLoadData(){
			// 后台查询出数据
			// 返回值中包括 1）角色及其权限信息 2）所有权限
			$.get("http://localhost:8080/getAllInfo",function(res){
				console.log(res);
				vue.qxs=res.data.QxInfo;  // 存储权限信息
				vue.roleqxs=res.data.RoleQxInfo;  // 存储角色及其权限信息
				
				// 循环遍历 角色及其权限 集合
				vue.roleqxs.forEach(function(obj){
					obj.qx.forEach(function(res){
						vue.updateQxInfo.push(obj.id+"-"+res.id)
					})
				})
				console.log(vue.updateQxInfo)
			})
		},
		toUpdate(){
			$.post("http://localhost:8080/updateRoleQx","list="+vue.updateQxInfo,function(res){
				alert(res);
			})
		}
	},
	mounted:function(){
		this.initLoadData()
	}
})

1-2】前端代码

<tbody>
	<tr v-for="item,index1 in roleqxs">
		<td>{{item.role}}</td>
		<td>
			<span v-for="ii in qxs" class="debj_span_fk">
				<input type="checkbox" v-model="updateQxInfo" :value="item.id+'-'+ii.id"/>
				{{ii.permission}}
			</span>
		</td>
	</tr>
</tbody>