VueJS InertiaJS Uncaught (in promise) TypeError: Cannot read property 'search' of undefined

Question

我正在使用 Inertia 在 Vue JS 上实现一个列表，您可以在其中按名称进行过滤

data() {
        return {
            selectedUser: this.value,
            selected: null,
            search: '',
        }
    },

computed: {
        userlist: function(){
            return this.users.filter(function(user){
                return user.name.toLowerCase().match(this.search.toLowerCase())
            });
        }
    },

和组件

<input class="form-input" placeholder="Search.." v-model="search">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center" v-for="user in userlist" :key="user.id" @click.prevent="select(user)">

但是，当我打开组件所在的模式时，出现错误

Uncaught (in promise) TypeError: Cannot read property 'search' of undefined

我已经像这样硬编码了搜索值

computed: {
        userlist: function(){
            return this.users.filter(function(user){
                return user.name.toLowerCase().match('John')
            });
        }
    },

并且组件呈现得很好。我不知道错误可能在哪里，所以任何帮助将不胜感激

Answer 1

你可以这样试试：

computed: {
    userlist: function(){
        const vm = this;
        return this.users.filter(function(user){
            return user.name.toLowerCase().match(vm.search.toLowerCase())
        });
    }
},

Answer 2

问题可能是您使用的 this 关键字期望它是对组件实例的引用，但您正在使用它 在 function 声明中，它创建了一个新的上下文，导致 this 成为 undefined。

computed: {
    userlist: function(){
        // here, this is the component instance
        return this.users.filter(function(user){
            // --> function(user) { creates a new context
            // here, this is undefined and this.search will cause the error
            return user.name.toLowerCase().match(this.search.toLowerCase())
        });
    }
}

为防止这种情况，您可以使用箭头函数，它将保留现有的上下文。这意味着 this 关键字仍将引用您的组件实例。

computed: {
    userlist: function(){
        // here, this is the component instance
        return this.users.filter((user) => { // --> replaced function with an  arrow function
            // here, this is still a reference to the component instance
            return user.name.toLowerCase().match(this.search.toLowerCase())
        });
    }
}

VueJS InertiaJS Uncaught (in promise) TypeError: Cannot read property 'search' of undefined

VueJS InertiaJS Uncaught (in promise) TypeError: Cannot read property 'search' of undefined

javascript

inertiajs

laravel

vue.js