Bir vuejs listesi ararken bir yükleme simgesi nasıl eklenir

Question

3000'den fazla dersin bir listesini oluşturmam gerekiyor, bu derslerin aranması gerekiyor. 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: keman olarak

var lessons = { /*Sample data*/ }  

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

bu kadar kötü üretimde daha fazla tarz var gibi arama yaparken bazı gecikme olduğunu görmek gerekir ve her liste öğesinde etkinlik ciltlemesi.

Bu bile olsa, vue.js bunu yaparken bir yükleme simgesinin nasıl görüntüleneceğini bilmek istiyorum. Etrafa baktım ve Ben size faydalanmak düşünüyorum

Answer 1

bilmemiz gereken başka bir şey varsa

isteyiniz herhangi kitaplıkları/uzantıları kullanarak açığım şey

bulamadık terminal directive. LimitBy'yi kullanmayı nasıl hissediyorsunuz? Listenizi 50 öğenin sınırlandırması, oluşturulma zamanı nedeniyle performansı önemli ölçüde artıracaktır.