Порядок результата VueJS API по рангу asc

Question

Я новичок в VueJS, и я создал панель поиска, где я могу искать топ-100 монет криптовалюты из CoinMarketCap. Как только вы войдете на страницу, вы увидите обзор всех 100 лучших монет. Все отлично работает, но я хочу отсортировать монеты по рангу в порядке возрастания.

Я начал проводить исследования в Интернете, и в результате я нашел это

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

Как мне добавить этот код в мой собственный код, потому что, если я добавлю код выше в свою функцию, он скажет, что вы не можете вернуть 2 вещи. И если я введу код в ответ, программа перестанет работать.

My 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 также есть встроенная функция сортировки для массивов.

для функции «FilterCoins» попробуйте добавить .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