javascript - 如何在搜索 vuejs 列表时添加加载图标

Question

我必须呈现超过 3000 个类(class)的列表，这些类(class)需要进行搜索。 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
  }
});

在 fiddle 中，您应该能够看到搜索时存在一些延迟，这在生产中更糟糕，因为每个列表项上有更多的样式和事件绑定(bind)。

我想知道如何在 vue.js 进行搜索时显示加载图标(如果可能的话)。我环顾四周，没有发现任何东西

Answer 1

我认为你可以利用terminal directive 。您对使用 limitBy 感觉如何？将列表限制为 50 个元素会显着提高性能，因为可以节省渲染时间。