In my application, there is a section that displays a list of users along with a search box to filter names. The user information is fetched from a database and stored in app.users. I have created a component named 'user' to show the details of each user. This component includes a 'show' attribute which controls whether or not the user's name is displayed based on a match with the input field.
watch: {
input_field() {
this.users.forEach(element => {
if (element.name.toLowerCase().indexOf(this.input_field.toLowerCase()) == -1){
element.show = false;
} else {
console.log('Show ' + element.name);
element.show = true;
}
});
}
}
The current implementation is not working as expected because I am referencing an array instead of Vue components. When I update the 'show' attribute, it appears that the changes are not reflected. To address this issue, I started maintaining an array of Vue components with the name 'user' to modify the 'show' attribute directly. Although this workaround works, I believe there might be a better solution for this problem. Can someone guide me on how to update the 'show' attribute in the original array without searching for the component instances?
You can find the link to my code on JSFiddle here: