获取已编辑的用户详细信息以立即在vue中更新

如何解决获取已编辑的用户详细信息以立即在vue中更新

我有一个带有用户列表的表，并且在侧面有一个面板，可用于编辑用户数据。我想做的就是 编辑用户的详细信息并单击“保存”按钮，然后我希望表上的用户详细信息立即更改。

但是目前的作用是，一旦我点击了“保存”按钮，用户就会被推到页面底部，而不是原本的位置，例如，如果我有一个叫Terry的用户，那么当我编辑了该用户，他们被推到Z的底部，而不是T的底部。

这是我的UserTable.vue

<template>
  <div class="card">
    <div class="card-body p-0">
      <table class="table table-sm table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>email</th>
            <th style="width:120px;"></th>
          </tr>
        </thead>
        
        <tbody>
          <tr v-for="user in users">
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
            <td style="text-align: right;">
              <button class="btn btn-sm btn-outline-info" @click="edit(user)">Edit &raquo;</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['bus','users'],data() {
      return {

      }
    }
    methods: {
      edit(user) {
        this.bus.$emit('edit-user',{ user: user });
      }
    },mounted(){
      this.bus.$on('update',payload => {
        this.users = this.users.filter(u => u.id != payload.user.id);
        this.users.push(payload.user);
      })
    }
  }
</script>

我的UserPanel.vue

<template>
    <div class="card" v-if="showDetail">
        <div class="card-header">
            <h3 class="card-title">
                <strong>
                    {{user.name}}
                </strong>
            </h3>
            <span style="cursor: pointer;" class="text-success" @click="editUser">
                <i class="fa fa-save"></i> Save Changes
            </span>
        </div>
        
        <div class="card-body p-0">
            <div class="card card-primary card-outline card-outline-tabs mb-0">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" class="form-control" id="name" v-model="name">
                </div>

                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" v-model="email">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['bus','user'],data() {
            return {
                name: null,email: null,showDetail: false
            }
        },methods: {
            editUser() {
                axios.put('/admin/users/'+this.user.id,{
                    name: this.name,email: this.email,}).then(response => {
                    this.bus.$emit('update',{
                        user: response.data
                    });
                });
            }
        },mounted(){
            this.bus.$on('edit-user',payload => {
                this.showDetail = true;
                this.user = payload.user;
            });
        }
    }
</script>