установите флажок на основании ответа от Axios

Question

У меня есть флажок

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

флажок v-модель в массиве user.permission

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, структура данных меняется.

Answer 1

Вам нужно будет изменить полученный ответ:

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