vue.js - [Vue 警告]：“更新用户”的事件处理程序出错：“TypeError：无法设置未定义的属性‘名称’”

Question

我有 2 个 vue 组件，一个是用户列表，另一个是用户的详细信息。

我想要做的是，如果我必须更新用户的详细信息，那么我希望它自动更新。我遇到的问题是我收到了这个错误

[Vue warn]: Error in event handler for "update-user": "TypeError: Cannot set property 'name' of undefined"

这是我的用户详细信息组件的代码

<template>
   <div class="card">
     <div class="card-header">
       <span class="text-success" @click="updateUser">Save Changes</span>
     </div>
       <div class="card-body p-0">
           <div class="card card-primary card-outline card-outline-tabs">
               <div class="card-body">
                 <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" class="form-control" id="name" v-model="name">
                </div>
               </div>
           </div>
       </div>
   </div>
</template>

<script>
   export default {
       props: ['emit', 'user'],
       data() {
           return {
               name: null,
           }
       },
       mounted() {

       },
       methods: {
           updateUser() {
               axios.put('/admin/users/'+this.user.id, this.name).then(response => {
                   this.emit.$emit('update-user', {
                       user: this.name
                   });
               });
           }
       }
   }
</script>

和我的带有用户列表的 vue 组件

<template>
    <div class="card">
        <div class="card-body>
            <table class="table table-sm table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in showUsers">
                        <td>{{user.name}}</td>
                        <td style="text-align: right;"><button class="btn btn-sm btn-outline-info" @click="detail(user)">Manage</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['emit', 'users'],
        data() {
            return {
                perPage: 10,
                currentPage: 1,
            }
        },
        computed: {
            filterUsers() {
                return (this.userFilter === '') ? this.users : this.users.filter(u => { return u.name.toLowerCase().indexOf(this.userFilter.toLowerCase()) > -1; });
            },
            showUsers() {
                let start = (this.currentPage - 1) * this.perPage;
                let end = start + this.perPage;
                return this.filterUsers.slice(start, end);
            }
        },
        methods: {
            detail(user) {
                this.emit.$emit('manage-user', { user: user });
            }
        },
        mounted(){
            this.emit.$on('update-user', payload => {
                this.user.name = payload.user.name;
            });
        }
    }
</script>

标签： vue.js

Answer 1

您遇到的错误是由this.user不存在于里面的上下文中引起的mounted() { this.emit.$on('update-user', ....}。

据我了解，您想更新特定用户的名称，但在这种情况下，您只有所有用户（this.users）在里面mounted()，您必须过滤掉该特定用户然后应用更新。

以下是一种解决方案：

如果user.id是唯一的，您可以发出user.id和user.name来自updateUser，然后在 中mounted，通过 找到特定用户user.id，然后对其进行更新。

updateUser() {
   axios.put('/admin/users/'+this.user.id, this.name).then(response => {
       this.emit.$emit('update-user', {
           name: this.name,  // new user.name
           id: this.user.id // assuming user.id is unique
       });
   });
}
this.emit.$on('update-user', payload => {
    this.users.find(user => user.id===payload.id).name = payload.name; // find the user then update its name
});