javascript - 如何获取 Vue.js 中计算数组的长度

Question

我有一个搜索输入，可以搜索 JSON 文件 - 它工作正常，我现在尝试向用户显示找到的结果数。 (例如“找到 26 个结果”- 或“未找到结果”)

我使用计算方法来检查用户是否单击了搜索输入，然后检查 JSON 文件以将用户的查询与 JSON 文件中的字符串进行匹配。这是我当前的代码:

    computed: {

    filteredPrizesByQuery: function() {
      if (this.searchInputClicked == true) {
        return this.prizes.filter(prize => {
          return (
            prize.prizeTitle.toLowerCase().match(this.query) || 
            prize.prizeTag.toLowerCase().match(this.query)
          )
        });
      } else
        return this.prizes.filter(prize => {
          return (
            prize.prizeType1Name.match(this.tabbedQuery) ||
            prize.prizeType2Name.match(this.tabbedQuery)
          );
        });
    }
  }

当我在搜索框中输入查询，然后查看我的 Vue 开发工具时，我可以看到数组计数已更新(计算不足)，例如。 filteredPrizesByQuery:Array[26]。这是我想向用户显示的值，但我不知道如何访问该值。

我尝试在计算方法中检查filteredPrizesByQuery 的长度或“奖品”的长度，但我要么得到最大调用堆栈大小错误，要么得到未定义的结果。

Answer 1

您可以简单地创建另一个计算属性并访问其中的 filteredPrizesByQuery 计算属性长度，如下所示:

computed: {    
   filteredPrizesByQuery: function() {
      // Your current logic returning array here...
   },
   filteredPrizesCount: function() {
      return this.filteredPrizesByQuery.length;
   }
}

然后更新 UI，如下所示:

<p>{{filteredPrizesCount}} results found</p>