VueJS API 结果按等级 asc 排序

Posted 2023-02-22

【中文标题】VueJS API 结果按等级 asc 排序

【英文标题】：VueJS API result order by rank asc

【发布时间】：2018-12-12 02:28:39

【问题描述】：

我是 VueJS 的新手，我创建了一个搜索栏，我可以在其中搜索来自 CoinMarketCap 的前 100 种加密货币硬币。进入该页面后，您将看到所有前 100 名硬币的概览。一切正常，但我想按升序对硬币进行排序。

我已经开始在互联网上进行研究，结果我发现了这个

return _.orderBy(this.users, 'name');

如何将此代码添加到我自己的代码中，因为如果我将上面的代码放在我的函数中，它会说你不能返回 2 东西。如果我把代码放在 return 中，程序就会停止工作。

我的 main.js：

const app = new Vue(
   el: '#app',
   data: 
       data: [],
       search: ''
   ,
   computed: 
       filteredCoins: function() 
   if (!this.search) return this.data
           return this.data.filter((coin) => 
               return coin.name.toLowerCase().includes(this.search.toLowerCase());
           );
       
   ,
   created () 
       fetch('https://api.coinmarketcap.com/v2/ticker/')
           .then(response => response.json())
           .then(json => 
               this.data = Object.values(json.data)
           )
   
)

FSFiddle

【参考方案1】：

_.orderBy 可能指的是Lodash javascript 库的orderBy 函数。你可以这样做，但 JavaScript 也有一个内置的数组排序功能。

对于您的“filteredCoins”功能，请尝试在您的.filter 之后添加.sort。所以它看起来像

return this.data
  .filter(c => c.name.toLowerCase().includes(this.search.toLowerCase());
  .sort((c1, c2) => c1.rank < c2.rank ? c1.rank === c2.rank ? 0 : -1 : 1);

您可以找到有关 .sort 如何在 MDN 上工作的更多详细信息

【讨论】：

它对我不起作用，您尝试过 JSFiddle 中的代码吗？链接在示例代码下

这更像是一个草图，而不是我解决的问题。 Here's 一个工作示例的链接：