根据来自axios的响应检查复选框

时间:2018-08-28 06:02:39

标签: javascript vue.js vuejs2

我有一个复选框

<div class="checkbox">
   <label>
       <input type="checkbox" value="add user" v-model="user.permissions">Add User
   </label>
</div>

<div class="checkbox">
    <label>
        <input type="checkbox" value="edit user" v-model="user.permissions">
    Edit User
    </label>
</div>

该复选框是user.permission数组上的v模型

user:{
    permissions: []
},

其中,当我选中一个复选框时,它会产生这样的结果

user:Object
    permissions:Array[2]
        0:"edit user"
        1:"add user"

现在,当我使用axios从后端获取数据并将数据放在user

上时
editUser: function(id){
    let vm = this;
    axios.get('api/users/' + id)
    .then( response => {
         vm.user = response.data.data; //PUT RESPONSE DATA TO USER OBJECT
         vm.usersModal = true;
        })
        .catch( error => {
         console.log(error);
        });
   },

它将产生这样的输出

user:Object
    created_at:"2018-08-28 03:17:33"
    deleted_at:null
    email:"aa@gmail.com"
    id:3
    name:"aa"
    permissions:Array[2]
        0:Object
            created_at:"2018-08-28 03:03:41"
            guard_name:"web"
            id:2
            name:"delete user"
            pivot:Object
            updated_at:"2018-08-28 03:03:41"
        1:Object
            created_at:"2018-08-28 03:03:41"
            guard_name:"web"
            id:3
            name:"add user"
            pivot:Object
            updated_at:"2018-08-28 03:03:41"
      updated_at:"2018-08-28 03:17:33"

现在我如何仅使用v模型user.permission选中此复选框。我使用了v模型的user.permission,因为我在发布请求时使用了它。但是,当我使用id提取数据时,数据结构会更改。

1 个答案:

答案 0 :(得分:1)

您将必须修改获取的响应:

next()