时间戳

首页 > 解决方案 > 根据来自 axios 的响应检查复选框

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

问题描述

我有一个复选框

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

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-model user.permission 检查复选框。我使用了 v-model user.permission，因为我在发布请求时使用它。但是，当我使用 id 获取它时，数​​据结构会发生变化。

标签： javascriptvue.jsvuejs2

解决方案

您将不得不修改获取的响应：

editUser: function(id){
    let vm = this;
    axios.get('api/users/' + id)
    .then( response => {
         response.data.data.user.permissions = response.data.data.user.permissions.map((item) =>
         {
           return item.name; // <--- convert the array of objects into array of strings
         });
         vm.user = response.data.data; //PUT RESPONSE DATA TO USER OBJECT
         vm.usersModal = true;
        })
        .catch( error => {
         console.log(error);
        });
   },

推荐阅读