需求

前端需要从后台获取一个列表，遍历形成一个checkbox列表，列表是动态的，可以选择或取消选择，点击保存提交数据给后台。

效果

前端

element

<span v-for="(item, index) in params.province" v-bind:key="index" style="margin-right:20px;">
      <el-checkbox v-model="params.checked[item.id]">{{item.name}}</el-checkbox>
    </span>

vue

data() {
    return {
      params: {
        province: [],
        checked: {}
      }
    };
  }

后台返回

function(res) {
          _self.params.province = res.body.data;
          for (var i = 0; i < res.body.data.length; i++) {
            var ch = res.body.data[i];
            //_self.params.checked[ch.id]=ch.punishTobaccoFlag;
            _self.$set(_self.params.checked, ch.id, ch.punishTobaccoFlag);
            debugger;
          }
        }

注意注释的那句，之前是想直接赋值，发现没有用，因为是异步请求，创建的时候没有checked中的数值都是空，要调用$set方法重新建立绑定关系。

获取值传到后台

var flagJson = JSON.stringify(this.params.checked);
      let _self = this;
      let url =
        URL.PORT.PUNISH_UPLOAD +
        "?flagJson=" +encodeURIComponent(flagJson);

后台接收处理

JsonObject parse = new JsonParser().parse(flagJson).getAsJsonObject();
        parse.entrySet().forEach((a) -> {
            Long id = Long.parseLong(a.getKey());
            boolean flag = a.getValue().getAsBoolean();
            EcChannel obj = new EcChannel();
            obj.setId(id);
            obj.setPunishTobaccoFlag(flag);
            ecChannelService.update(obj, true);

        });