0

我通过迭代在 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方法中获得任何结果时遇到了一些麻烦。我觉得我的方法很遥远。如果有人能指出我正确的方向，我会欣喜若狂。

4

2 回答 2

1

@Nikolas Yankov 是对的。但是帮自己一个忙，从 lodash 导入一个函数：_.sortBy。你可以：

import _sortBy from ‚lodash/sortBy‘

export default {
  computed: {
    sortedAccountsList() {
      return _sortBy(this.payeeFundingAccountsList, [‚accountType‘])
    }
  }
}
于 2020-06-11T18:33:39.237 回答
1

您可以使用计算属性，您可以在 v-for 循环开始使用它之前进行排序。例如，如果您的集合“payeefundingAccountsList”是数据中的数据属性，那么计算的属性将如下所示：

  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"
/>
于 2020-06-11T18:13:35.673 回答