javascript - 根据 vuejs 中以 json 形式出现的响应，预先检查复选框

Question

对不起我的英语不好。我正在尝试预先选择那些值已保存在数据库中的复选框。我在 vuejs 中使用 javascript 完成了它，但是那些选中的复选框值没有存储在数组中。

我的代码就像

角色.component.js

getRoleRowData(data) {
        this.roleaction = "edit";
        this.addrolemodal = true;
        console.log(data.role_id);

        axios
            .post(apiUrl.api_url + "getRolePermissionData", {
                role_id: data.role_id
            }).then(
                result => {
                    this.permid = result.data;

                    var list = [];
                    result.data.forEach(function(value) {
                        list.push(value.perm_id);
                    });
                    var options = list;

                    for (var i = 0; i < options.length; i++) {
                        if (options[i]) document.querySelectorAll('input[value="' + options[i] + '"][type="checkbox"]')[0].checked = true;
                    }
                },
                error => {
                    console.error(error);
                }
            );
        this.addrole = data;
    },

和 role.component.html

<div class="col-md-8">
                    <b-form-fieldset>
                       <div class="form" id="demo">
                          <h6>Permissions</h6>
                          <span v-for="perm_name_obj in listPermissionData">
                          <input type="checkbox" class="perm_id" v-bind:value="perm_name_obj.perm_id" name="perm_id" id="perm_name" v-model="checkedPerm_Id"> {{perm_name_obj.perm_name}}<br>
                          </span>
                          <span>Checked names: {{ checkedPerm_Id }}</span>
                       </div>
                    </b-form-fieldset>
                 </div>

和输出

我得到的输出

简而言之，我想预先检查 vuejs 中哪些值存储在数据库中的复选框。

标签： javascriptnode.jscheckboxvue.jsvuejs2

Answer 1

请参见以下示例，使用模拟数据

var app = new Vue({
  el: '#app',
  data () {
    return {
      listPermissionData: [],
      checkedPerm_Id: []
    }
  },
  created () {
    setTimeout(_=>{
      //Here simulates axois to request Permission data
      this.listPermissionData = [
        {perm_id:1,perm_name:'perm_name1'},
        {perm_id:2,perm_name:'perm_name2'},
        {perm_id:3,perm_name:'perm_name3'},
        {perm_id:4,perm_name:'perm_name4'},
        {perm_id:5,perm_name:'perm_name5'}
      ];
      
      //Here simulates axois to request Selected Permissions (result.data)
      var selected = [
        {perm_id:2,perm_name:'perm_name2'},
        {perm_id:5,perm_name:'perm_name5'}
      ]
      
      this.checkedPerm_Id = selected.map(o=>o.perm_id)
    },1000)
  }
})

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div class="form">
  <h6>Permissions</h6>
    <span v-for="perm_name_obj in listPermissionData">
      <input type="checkbox" class="perm_id" v-bind:value="perm_name_obj.perm_id" name="perm_id" id="perm_name" v-model="checkedPerm_Id"> {{perm_name_obj.perm_name}}<br>
    </span>
    <span>Checked names: {{ checkedPerm_Id }}</span>
  </div>
</div>