vuejsリストを検索中に読み込みアイコンを追加する方法

Question

私は3000以上のレッスンのリストをレンダリングする必要があります。これらのレッスンは検索する必要があります。 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 
    } 
}); 

、このようにはるかに悪化生産の多くのスタイリングがありますよう、および各リスト項目のイベントバインディングが含まれます。

vue.jsが検索を実行している間に読み込みアイコンを表示する方法を知りたい場合は、これも可能です。私は周りを見回していると私はあなたが私はあなたが使用することができると思い

Answer 1

を知っておく必要があります何かがあるかどう

お問い合わせください、私はどんなするライブラリ/拡張を使用する開いているもの

を見つけることができませんでしたterminal directive。 limitByの使い方についてどう思いますか？リストを50要素に制限すると、レンダリング時間が節約されるため、パフォーマンスが大幅に向上します。