Search Filtering With Vue2
Solution 1:
The param facetsIndex is not reactive, please take a look at your jsconsole, you should have a warning about this and not only this, your code logic is totally wrong.
- You could use a v-model on input,
- create a
filteredFacetsproperty, - use this property in your loop.
Just an example, you should read more about how VueJS works : https://vuejs.org/v2/guide/
Solution 2:
You can see my jsfiddle for search items on Vuejs. I hope this will help you.
<divid="app"><label>
Search name: <inputtype="text"v-model='searchString'></label><br><transition-grouptag='ul'name='my-list'><liv-for='item in filteredList':key='item.id'class="my-list-item">
{{item.name}}
</li></transition-group></div><script>const app = newVue({
el: '#app',
beforeMount() {
const req = fetch('https://jsonplaceholder.typicode.com/users');
req.then(response => {
if (response.ok) {
return response.json();
}
thrownewError('Bad request: ' + response.status);
})
.then(users => {
this.users = users;
this.nextId = this.users.length + 1;
});
},
data: {
searchString: '',
users: [
{id: 1, name: 'Alex'},
{id: 2, name: 'Bob'},
{id: 3, name: 'Sandy'},
],
},
computed: {
filteredList: function() {
const searchString = this.searchString.toLowerCase();
returnthis.users.filter(item => item.name.toLowerCase().includes(searchString));
}
}
});
</script>
Post a Comment for "Search Filtering With Vue2"