如何在 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;
   }
}

然后更新用戶界面，如：

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