如何在搜索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執行搜索，如果這甚至可能。我環顧四周，我找不到任何

我願意用任何libaries /擴展

請詢問是否有其他任何你需要知道

Answer 1

我想你可以使用terminal directive。你覺得如何使用limitBy？將列表限制爲50個元素會顯着提高性能，因爲節省了渲染時間。