Userlist.vue

<template>
<div class="col-md-12">
  <div class="row">
    <div class="col-md-12">
      <Adduser></Adduser>
    </div>
      <table class="table table-hover" v-cloak>
        <thead class="bg-inverse">
          <tr>
            <th>IMG</th>
            <th>Name</th>
            <th>Username</th>
            <th>E-mail</th>
            <th>Active</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user, index) in list">
            <td>
              <img :src="user.avatar" style="max-width: 50px; max-height: 50px">
            </td>
            <td>
              {{ user.name }}
            </td>
            <td>
              <form action="" @submit.prevent="updateUser">
                <input type="text"
                       name="username" v-if="edit"
                       v-model="user.username"
                       :class="{'form-control form-control-sm': true, 'is-invalid': form.errors.has('username') }"
                >
                <span v-else>{{ user.username }}</span>
              </form>
            </td>
            <td>{{ user.email }}</td>
            <td><Toggle v-model="user.active"></Toggle></td>
            <td>
              <b-btn size="sm" variant="primary" @click.prevent="viewUser(user)" v-if="!edit"><i class="fa fa-eye"></i> Ver</b-btn>
              <b-btn size="sm" variant="info" v-if="!edit" @click.prevent="editUser($event, user.username)"><i class="fa fa-edit"></i> Edit</b-btn>
              <b-btn size="sm" variant="danger" @click.prevent="deleteUser(user)" v-if="!edit"><i class="fa fa-trash"></i> Delete</b-btn>

              <b-btn size="sm" variant="danger" @click.prevent="cancelEdit" v-if="edit"><i class="fa fa-ban"></i> Cancel</b-btn>
              <b-btn size="sm" variant="warning" @click.prevent="onUpdate(user)" v-if="edit"><i class="fa fa-refresh"></i> Update</b-btn>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Adduser from '../modals/Adduser'
import Toggle from '../Simpleswith';
export default {
  components: { Adduser, Toggle},
  data () {
    return {
      list: [],
      edit: false,
      form: new Form({ username: '' }),
      user: {id: '', name: '', email: ''},
      fillItem : {
        'name':'',
        'username':'',
        'email':'',
        'id':''
      },
      editForm: {},
    };
  },
  created(){
    this.fecthUserList();
  },
  methods: {
    fecthUserList(){
      axios.get('/admin/userjson').then((res) => {
        this.list = res.data
      });
    },
    viewUser(user){
      axios.get('/admin/userjson/' + user.id).then((res) => {
        let listUser = ['Name: '+ user.name, user.id, user.email, user.created_at];
        swal('Successo', listUser + 'com ID '+user.id+' excluido com sucesso', 'success', {timer: 6000, buttons: true})
        this.$emit('cu')
        console.log('delete '+user.name)
      })
      .catch((err) => console.error(err.data));
    },
    editUser(user){
      this.edit = true;
      this.fillItem.username = user.username;
    },
    cancelEdit(){
        this.edit = false;
        this.editForm = '';
    },
    onUpdate(user){
      let input = this.fillItem;
      this.form.put('/admin/userjson/' + user.id, input).then(status => {
        swal('Successo', user.name+' atualizado com sucesso', 'success', {timer: 800, buttons: false})
        this.fecthUserList()
        this.cancelEdit()
      })
      .catch((err) => console.log(err.status))
    },
    deleteUser(user){
      axios.delete('/admin/userjson/' + user.id).then((res) => {
        let index = this;
        this.fecthUserList()
        swal('Successo', user.name+' excluido com sucesso', 'success', {timer: 800, buttons: false})
        console.log('delete '+user.name)
      })
      .catch((err) => console.error(err.data));
    },
  }
};
</script>