如何在搜索 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 个元素会大大提高性能，因为可以节省渲染时间。