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

【问题标题】：VueJS InertiaJS Uncaught (in promise) TypeError: Cannot read property 'search' of undefinedVueJS InertiaJS Uncaught (in promise) TypeError: Cannot read property 'search' of undefined
【发布时间】：2021-10-06 13:43:19
【问题描述】：

我正在使用 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')
            });
        }
    },

并且组件渲染得很好。我没有得到错误可能在哪里，所以任何帮助将不胜感激

【问题讨论】：

如果将 v-model 替换为 selected 或任何其他值，是否显示相同？

标签： javascript laravel vue.js inertiajs

【解决方案1】：

问题很可能是您使用 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())
        });
    }
}

【讨论】：

谢谢，这确实是导致错误的原因。总的来说，我对 Vue Js 和前端有点陌生，所以这对我有帮助！

【解决方案2】：

你可以这样试试：

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

【讨论】：