[Vuejs]-Vue.js list filtering – no results fallback

by

0👍

Array.protype.filter method returns an empty array if no elements pass the test. So you can set up v-if on the <li> to check if tthe filteredList is empty or not.

<input class="form-control" placeholder="Enter the SEO term you wish to find" v-model="search" />
<ul class="ls-none">
    <li v-if="filteredList.length " v-for="(item, index) in filteredList" :key="index">
        <h4>{{item.glossary_term}}</h4>
        <div v-html="item.glossary_definition"></div>
    </li>
    //if empty display no results text
    <li v-else>No results...</li>
</ul>

Leave a comment