如何在 vue.js 中对计算属性进行排序？答案

【问题标题】：How do I sort a computed property in vue.js?如何在 vue.js 中对计算属性进行排序？
【发布时间】：2019-10-02 22:12:12
【问题描述】：

我正在尝试使用在计算属性中计算的行对表上的列进行排序。但是我收到以下错误：

“已分配计算属性‘tableData’，但没有设置器。

这是我的计算代码：

 tableData() {
            let convertedData = this.dataOverview
            let newData = _(convertedData)
            .groupBy('conversationSource')
            .map((objs, key) => ({
                'conversationSource': key,
                'conversationCount': _.sumBy(objs, 'conversationCount'),
                'interactive': _.sumBy(objs, 'interactive'),
                'leads': _.sumBy(objs, 'leadsSent'),
                'merchants': _.size(objs, 'merchantName'),
                'merchantId': _.map(objs, 'merchantId'),
                'leadsPercent': _.round((_.sumBy(objs, 'leadsSent') / _.sumBy(objs, 'interactive') || 0) * 100)
                }))
                .value();
                return newData;
        }

这是我用来排序的方法...

methods: {
            sortTable(column) {
                let sortedData = []
                sortedData = this.tableData.sort((a, b) => {
                    if (a[column.field] < b[column.field]) { return -1; }
                    if (a[column.field] > b[column.field]) { return 1; }
                    return 0;
                })

                if (!this.sortOptions.currentSortColumn || this.sortOptions.currentSortColumn !== column.field) {
                    this.tableData = sortedData;
                    this.sortOptions.sortAscending = true;
                    this.sortOptions.currentSortColumn = column.field;
                    return;
                }

                this.sortOptions.sortAscending
                    ? this.tableData = sortedData.reverse()
                    : this.tableData = sortedData

                this.sortOptions.sortAscending = !this.sortOptions.sortAscending;
                this.sortOptions.currentSortColumn = column.field;
            }

这是我的数据..

props: {
        dataOverview: {
            type: Array,
            required: true
        },
    },
    data() {
        return {

            convertedData: [],
            currentSort: 'name',
            currentSortDir: 'asc',
            sortOptions: {
                sortAscending: true,
                currentSortColumn: null
            },

最后.. 这是我使用 tableData 的模板

<tbody
        class="">
        <tr
          v-for="(row, key) in tableData"
          :key="key"
          class="">
          <td><span>{{ row.conversationSource }}</span></td>
          <td>{{ row.merchants }}</td>
          <td>{{ row.conversationCount }}</td>
          <td>{{ row.interactive }}</td>
          <td>{{ row.leads }}</td>
          <td>{{ row.leadsPercent }}%</td>
          <td>&nbsp;</td>

        </tr>

当我在 mount() 生命周期钩子上进行数据操作时，排序方法起作用了。但是这些数据会动态变化，因此 mount() 不起作用。

【问题讨论】：

你能在你使用tableData的地方显示模板绑定吗？
我认为解决方案是将tableSort 转换为(a, b) 函数，然后在您的计算属性return newData.sort(this.tableSort) 中，然后您的数据将始终排序。
@DanielOrmeño 用模板更新了问题...肖恩你能告诉我你的意思吗？
好吧，您现在实际上可以使用您的包装器，但返回您编写的 (a, b) 排序函数。我认为它看起来像这样 ``` sortTable(column) { return (a, b) => { if (a[column.field] b[column.field]) { 返回 1; } 返回 0; } ```

标签： javascript html arrays vue.js javascript-objects

【解决方案1】：

为了更好的样式，我可以编码。这是我建议的解决方案。

在方法内

tableSort(column) {
  return (a, b) => {
    if (a[column.field] < b[column.field]) { return -1; }
    if (a[column.field] > b[column.field]) { return 1; }
    return 0;
  }
}

在计算属性中

tableData() {
    let convertedData = this.dataOverview
    let newData = _(convertedData)
    .groupBy('conversationSource')
    .map((objs, key) => ({
            'conversationSource': key,
            'conversationCount': _.sumBy(objs, 'conversationCount'),
            'interactive': _.sumBy(objs, 'interactive'),
            'leads': _.sumBy(objs, 'leadsSent'),
            'merchants': _.size(objs, 'merchantName'),
            'merchantId': _.map(objs, 'merchantId'),
            'leadsPercent': _.round((_.sumBy(objs, 'leadsSent') / _.sumBy(objs, 'interactive') || 0) * 100)
            }))
            .value();
            return newData.sort(this.tableSort('nameOfColumn'));
}

您甚至可以通过将 nameOfColumn 设为变量而不是常量来动态更改排序

【讨论】：