Question

抱歉我的英文。我试图预先选择那些已在数据库中保存值的复选框。我是在vuejs中使用javascript完成的，但是那些选中的复选框值不存储在数组中。

我的代码就像

role.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>

输出

And the Ouput I got

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

Answer 1

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

＆＃13;

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)
  }
})

＆＃13;

	<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>

＆＃13;

Answer 2

我解决了我的问题，这是我的代码

role.component.js

    getRoleRowData(data) {
  this.roleaction = "edit";
  this.addrolemodal = true;
  console.log(data.role_id);
  let tempthis = this;
  axios
    .post(apiUrl.api_url + "getRolePermissionData", {
      role_id: data.role_id
    }).then(
      result => {
        this.permid = result.data;
        var list = [];
        result.data.forEach(function(value) {
          //by using tempthis variable we provided the current access to the checkedPerm_Id array which not accessible from out of the function which is getRoleRowData
          tempthis.checkedPerm_Id.push(value.perm_id);
          list.push(value.perm_id);
        });
      },
      error => {
        console.error(error);
      }
    );
  this.addrole = data;
},

预先检查复选框，具体取决于vuejs中以json形式出现的响应

2 个答案: