I am facing an issue with multiple dynamically added search forms on my webpage. Currently, when a user performs a search on one form, all inputs are being searched instead of just the relevant one.
Below is the HTML Code for reference:
<div class="row p-5">
<input type="text" id="p1" placeholder="Enter ..." class="form-control" v-model="filter">
<div class="result-section">
<div class="user-list" v-for="user in filterUsers">
<div class="label">{{user}}</div>
</div>
</div>
</div>
<div class="row p-5">
<input type="text" id="p2" placeholder="Enter ..." class="form-control" v-model="filter">
<div class="result-section">
<div class="user-list" v-for="user in filterUsers">
<div class="label">{{user}}</div>
</div>
</div>
</div>
<div class="row p-5">
<input type="text" id="p3" placeholder="Enter ..." class="form-control" v-model="filter">
<div class="result-section">
<div class="user-list" v-for="user in filterUsers">
<div class="label">{{user}}</div>
</div>
</div>
</div>
Here is the JS code snippet:
let app = new Vue({
el:"#app",
data:{
filter: '',
userList : ['user1','user2','user3','user4','user5']
},
computed: {
filterUsers()
{
var filtered = this.userList.filter((user) => {
return user.toLowerCase().includes(this.filter.toLowerCase());
});
return filtered;
},
}
I am wondering if it is possible to have different results displayed for each input field?