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 排序的主要内容,如果未能解决你的问题,请参考以下文章