VueJS API 结果按等级 asc 排序

Posted

技术标签:

【中文标题】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 一个工作示例的链接:

以上是关于VueJS API 结果按等级 asc 排序的主要内容,如果未能解决你的问题,请参考以下文章

按 Field1 Field2 Field3 ASC 和 DESC 对查询结果进行排序

12排序

按字母顺序对查询结果进行排序,但在排序中排除“the”?

8)排序分组

Mysql之 order by 排序

关于mysql数据库排序的问题