Wie man ein Ladesymbol während der Suche nach einer Vuejs-Liste hinzufügt

Question

Ich muss eine Liste von über 3000 Lektionen erstellen, diese Lektionen müssen durchsucht werden. Here is a jsfiddle that demonstrates the basics of what I'm doing with the sample data

HTML:

<div class="container"> 
<div id="filter-by-example" class="row"> 
    <div class="row"> 
    <input class="col s4" v-model="searchQuery"> 
</div> 
    <ul class="collection col s4"> 
     <li class="collection-item" v-for="n in lessons| filterBy searchQuery in 'name'"> 
     {{ n.name }} 
     <a href="#l.id" class="secondary-content"><i class="fa fa-plus"></i></a> 
     </li> 
    </ul> 
    </div> 
</div> 

JS:

var lessons = { /*Sample data*/ }  

new Vue({ 
    el: '#filter-by-example', 
    data: { 
    lessons: lessons 
    } 
}); 

In der Geige sollten Sie in der Lage sein zu sehen, wie es einige Verzögerung ist während der Suche, das so viel schlechter in der Produktion, da es mehr Styling ist und Ereignisbindung für jeden Listeneintrag.

Ich möchte wissen, wie man ein Ladesymbol zeigt, während vue.js die Suche durchführt, falls das überhaupt möglich ist. Ich habe umsah und ich konnte nichts

Ich bin offen für alle mit libaries/extensions

Bitte fragen Sie finden, wenn gibt es alles, was Sie

Answer 1

wissen müssen, ich glaube, Sie Gebrauch machen könnte von terminal directive. Wie denkst du über die Verwendung von limitBy? Wenn Sie Ihre Liste auf 50 Elemente beschränken, wird die Leistung aufgrund der gesparten Renderzeit drastisch erhöht.