如何在 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 的长度或“prize”的长度，但我得到最大调用堆栈大小错误或未定义。

Answer 1

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

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

然后像这样更新 UI：

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