VueJS InertiaJS Uncatch (in promise) TypeError： 无法读取 undefined 的属性'search'

Question

我在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

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

Answer 2

您可以这样尝试:

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