vue中checkbox回填与获取选中的值

项目用到了checkbox控件，需要从数据库获取数据，并且有的数据从数据库读取出来后就是选中状态的，在页面中选中数据后在保存到数据库中。

以下是全部代码

        <label v-for="item in UserRoleList" v-bind:key="item.rId">

           <input name="roles" type="checkbox" :value="item.rId" :disabled="item.isDisabled" v-model="checkVal"/>{{item.roleName}}

        </label>

          <el-button type="primary" @click="updateUser">确定</el-button>


说明：v-model="checkVal"  checkbox会根据checkVal中的值默认选中数据，checkVal必须是数组

以下是javascript部分

data () {

    return {

      updateUid:'',  //修改的用户Id

      checkVal:[],  //checkbox选择角色回填和选中的值

    }

  }
created() {
    this.getRoleList()  //加载select中角色信息
  },
methods: {

 //编辑角色获取用户角色接口

    getUserRoles(userid){

      this.$axios.post('',{uId:userid},{headers: {

        accessToken: util.cookies.get('token')

      }}).then(res=>{

        this.UserRoleList=res.roleList;  //加载全部数据

        this.checkVal=[];

        this.UserRoleList.forEach(i=>{

          if(i.isChecked){  //根据此字段判断页面中的checkbox是否选中，如果选中放到checkVal数组中

            this.checkVal.push(i.rId);

          }

        })

      })

    }

},

    //修改用户

    updateUser(){

      if(this.updateUid==""){

        this.$message({type:'error',message:'请选择用户'})

        return;

      }

      if(this.checkVal.length==0){

        this.$message({type:'error',message:'请选择角色信息'})

        return;

      }

    // 修改时这里可以获取到checkbox中全部选中的值

      this.$axios.post('',{uId:this.updateUid,roleIds:this.checkVal.join(',')},{

        headers: {

            accessToken: util.cookies.get('token')

            }

      }).then(res=>{

        if(res>0){

          this.$message({type:'success',message:'修改成功'});

        }

      })

    }