Vue.js列表过滤-没有结果回退

Question

我正在使用Vue.js创建一个列表，当用户键入搜索词时，该列表可以由用户过滤。 我想做的是，当他们输入的术语不在列表中时，显示一条消息，例如“无结果”。

到目前为止，这是我的代码：

的HTML

<input class="form-control" placeholder="Enter the SEO term you wish to find" v-model="search" />
<ul class="ls-none">
    <li v-for="(item, index) in filteredList" :key="index">
        <h4>{{item.glossary_term}}</h4>
        <div v-html="item.glossary_definition"></div>
    </li>
</ul>

JAVASCRIPT

<script>
var app = new Vue({
  el: '#app',
  data: {
    search: '',
    glossary: <?php echo $json; ?>

  },
  computed: {
    filteredList: function() {
      var self=this;
      function compare(a, b) {
        if (a.glossary_term < b.glossary_term)
          return -1;
        if (a.glossary_term > b.glossary_term)
          return 1;
        return 0;
      }
      this.glossary.sort(compare);
      return this.glossary.filter(function(item){
          return item.glossary_term.toLowerCase().trim().replace(/\s/g, '').indexOf(self.search.toLowerCase().trim().replace(/\s/g, ''))>=0;
      });
    }
  }
})
</script>

我尝试使用v-for和v-if的组合，但不确定是否需要在if语句中检查什么。

就像是：

<div v-if="/*glossary item is there in the list*/"></div>

Answer 1

如果没有任何元素通过测试，则Array.protype.filter方法将返回一个空数组。 因此，您可以在<li>上设置v-if来检查filteredList是否为空。

<input class="form-control" placeholder="Enter the SEO term you wish to find" v-model="search" />
<ul class="ls-none">
    <li v-if="filteredList.length " v-for="(item, index) in filteredList" :key="index">
        <h4>{{item.glossary_term}}</h4>
        <div v-html="item.glossary_definition"></div>
    </li>
    //if empty display no results text
    <li v-else>No results...</li>
</ul>