Currently, I am working on a Vue JS project with Inertia. One of the features I am implementing is a list that allows users to filter by name.
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())
});
}
},
In my component, I have the following input field and display logic:
<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)">
However, upon opening the modal where the component is located, an error occurs:
Uncaught (in promise) TypeError: Cannot read property 'search' of undefined
To isolate the issue, I hardcoded a value for the search parameter like so:
computed: {
userlist: function(){
return this.users.filter(function(user){
return user.name.toLowerCase().match('John')
});
}
},
After implementing this temporary fix, the component renders without any errors. I am currently stuck trying to debug this issue, so any guidance or assistance would be greatly appreciated.