Javascript Vue.js列表筛选-无结果回退

我正在使用Vue.js创建一个列表，用户在键入搜索词时可以对该列表进行过滤。我希望它能在他们输入的术语不在列表中时显示一条消息，如“no results”

这是我目前的代码：

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>

{{item.glossary_term}

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>

var app=新的Vue({
el:“#应用程序”，
数据：{
搜索：“”，
词汇表：
},
计算：{
filteredList:函数（）{
var self=这个；
功能比较（a、b）{
如果（a.词汇表术语b.术语表\u术语）
返回1；
返回0；
}
这个.glossary.sort（比较）；
返回此.glossary.filter（函数（项）{
返回项.glossary_term.toLowerCase（）.trim（）.replace（/\s/g'）.indexOf（self.search.toLowerCase（）.trim（）.replace（/\s/g'）>=0；
});
}
}
})

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

比如：

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

---

如果没有元素通过测试，则Array.protype.filter方法返回空数组。因此，您可以在

上设置

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>

{{item.glossary_term}

//如果为空，则不显示结果文本
没有结果

您是否尝试检查过滤器列表的长度？如果它是0，则该术语不在列表中。谢谢，我现在已将其修复。您好，太好了，因此我将执行以下操作：v-If filteredList.length>0？亲爱的，修复了它！Thanks@RyanMc无需

>0

，只需检查

filteredList.length

。如果为0，它将被强制为false，并且

否则

条件将生效