在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何使用vue用原生checkbook來做編輯回顯?

如何使用vue用原生checkbook來做編輯回顯?

因為之前一直都是用true或是false來做回顯, 但是后臺這次返回來的數(shù)據(jù)是根據(jù)id來操作, 首先是顯獲取到全部的checkbook數(shù)據(jù), 然后根據(jù)后臺返回的數(shù)據(jù)是根據(jù)id來做回顯, 下面有打印出來對應(yīng)的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;
      // 獲取所有checkbox的list
      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

回答
編輯回答
瘋子范

這問題很基礎(chǔ)，看官網(wǎng)的介紹 input的v-model雙向數(shù)據(jù)綁定。 <input type="checkbox" v-model='yourChoseId'>
js ajax的數(shù)據(jù)date循環(huán)push id給yourChoseId:{type:Array} 這樣就會雙向數(shù)據(jù)綁定了

2018年5月12日 18:45
編輯回答
解夏

通過v-if做判斷來實現(xiàn)

            <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);
        });
2017年2月24日 04:04