Как создать метод сортировки по значению свойства (строке)?

Question

Я создаю следующий список во Vue, повторяя payeefundingAccountList.

<cx-select id="payee-select" @cxChange="changeSelectedPayee" class="dropdown">
  <option value="" disabled selected>Choose payment account</option>
  <option
    v-for="(account, index) in payeefundingAccountsList"
    :value="index"
    :key="index"
    :checked="index === paymentAccountSelectedIndex"
  >{{ account.bankName }}...{{account.displayAccountNumber}}({{account.accountType}})</option>
  <option
    v-bind:key="payeefundingAccountsList.length + 1"
    v-bind:value="payeefundingAccountsList.length +1"
  >Add a payment account</option>
</cx-select>

Мне нужно отсортировать этот список по свойству account.accountType. Это свойство может иметь два значения:CHECKING или SAVINGS и мне нужны предметы с accountType CHECKING быть отсортированным в начало.

Я пытаюсь создать метод для выполнения списка перед повторением, как таковой:

v-for="(account, index) in sortByAccountType(payeefundingAccountsList)"

... но у меня возникли проблемы с получением каких-либо результатов от sortByAccountTypeметод. Я чувствую, что мой подход далек от цели. Если бы кто-нибудь мог указать мне в правильном направлении, я был бы на седьмом небе от счастья.

Answer 1

Вы можете использовать вычисляемое свойство, в котором вы можете выполнить сортировку до того, как цикл v-for начнет его использовать. Например, если ваша коллекция payeefundingAccountsList является свойством данных в data, то вычисленное свойство будет выглядеть следующим образом:

  computed: {
    sortedList() {
      return this.payeefundingAccountsList.sort(this._compare);
    },
  },
  methods: {
    _compare(a, b) {
      if (a.accountType < b.accountType) {
        return -1;
      }
      if (a.accountType > b.accountType) {
        return 1;
      }
      return 0;
    },
  },

А затем используйте это вычисленное свойство в своем v-for:

<option
    v-for="(account, index) in sortedList"
/>

Answer 2

@ Николай Янков прав. Но сделайте себе одолжение и импортируйте одну функцию из lodash:_.sortBy. Вы можете:

import _sortBy from ‚lodash/sortBy‘

export default {
  computed: {
    sortedAccountsList() {
      return _sortBy(this.payeeFundingAccountsList, [‚accountType‘])
    }
  }
}