How to use vue to edit and echo with native checkbook?

because the echo is always done with true or false before, but the data returned by the backend this time is operated according to id. First, all the checkbook data is obtained by the display, and then the echo is done according to the id according to the data returned by the background. Here is the printed corresponding id
html

.
<ul class="section_ul clearfix">
  <li v-for="item in roleList" :key="item.id">
     <input type="checkbox">
     <label>{{ item.name }}</label>
  </li>
</ul>

js

    roles(index, row) {
      this.assignRoles = true;
      // checkboxlist
      this.$ajax.get(this.$api.roleList).then(res => {
        if(res.data.status == 200) {
          this.roleList = res.data.data.roleList;
          this.id = this.rowData[0].id;
          // 
          this.$ajax.get(this.$api.roleUser + this.id).then(res => {
            console.log("11111", res);
            this.userRoleList = res.data.data.userRoleList;
          })
        }        
      })
      .catch(err => {
        console.log("roles", err);
      })
    },

clipboard.png

clipboard.png

Mar.16,2021

use v-if to judge

            <ul class="section_ul clearfix">
              <li v-for="item in roleList" :key="item.id">
                <input type="checkbox" @change="roleChange" :value="item.id" checked v-if="userRoleIds.indexOf(item.id) != -1">
                <input type="checkbox" @change="roleChange" :value="item.id" v-if="userRoleIds.indexOf(item.id) == -1">
                <label>{{ item.name }}</label>
              </li>
            </ul>

js

      this.$ajax
        .get(this.$api.roleList)
        .then(res => {
          if (res.data.status == 200) {
            this.roleList = res.data.data.roleList;
            this.id = this.rowData[0].id;
            this.$ajax.get(this.$api.roleUser + this.id).then(res => {
              if (res.data.status == 200) {
                this.userRoleIds = res.data.data.userRoleIds;
              }
            });
          }
        })
        .catch(err => {
          console.log("roles", err);
        });

this problem is very basic. See the introduction of input's v-model two-way data binding on the official website. < input type= "checkbox" v
js ajax's data date loops push id to yourChoseId: {type:Array} so that there will be bidirectional data binding

Menu