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 filteredFacets property,
• 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.

<div id="app">
    <label>
        Search name: <input type="text" v-model='searchString'>
    </label> <br>
    <transition-group tag='ul' name='my-list'>
        <li v-for='item in filteredList' :key='item.id' class="my-list-item">
            {{item.name}}
        </li>
    </transition-group>
</div>
<script>
   const app = new Vue({
    el: '#app',
    beforeMount() {
        const req = fetch('https://jsonplaceholder.typicode.com/users');
        req.then(response => {
            if (response.ok) {
                return response.json();
            }
            throw new Error('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();
            return this.users.filter(item => item.name.toLowerCase().includes(searchString));
        }
    }
});
</script>

Share