Question

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

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

返回_.orderBy（this.users，'name'）;

如何将此代码添加到自己的代码中，因为如果将上面的代码放在函数中，它将表示您无法返回两件事。而且，如果我将代码放到返回程序中，程序将停止工作。

我的 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

Answer 1

_.orderBy可能是指orderBy JavaScript库的Lodash函数。您可以这样做，但是JavaScript还为数组提供了内置的排序功能。

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

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上如何工作的更多详细信息

VueJS API结果按等级升序排列

1 个答案: