How to create method to sort by property value (string)? - sorting

Question

I'm creating the following list in Vue by iterating through 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>
I need to sort this list by the property account.accountType. This property can have two values: CHECKING or SAVINGS and I need the items with accountType CHECKING to be sorted to the top.
I'm trying to create a method to run the list through before iterating, as such:
v-for="(account, index) in sortByAccountType(payeefundingAccountsList)"
...but, I'm having some trouble getting any sort of results from the sortByAccountType method. I feel like my approach is way off. If anyone could point me in the right direction, I'd be over the moon.

Answer 1

#Nikolas Yankov is right. But do yourself a favor and import the one function from lodash:_.sortBy. You can:
import _sortBy from ‚lodash/sortBy‘
export default {
computed: {
sortedAccountsList() {
return _sortBy(this.payeeFundingAccountsList, [‚accountType‘])
}
}
}

Answer 2

You can use a computed property where you can make your sorting before v-for loop start using it. For instance, if your collection "payeefundingAccountsList" is a data property in data, then the computed property would look like this:
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;
},
},
And then use this computed property in your v-for:
<option
v-for="(account, index) in sortedList"
/>