Как отсортировать вычисляемое свойство в vue.js?

Question

Я пытаюсь отсортировать столбцы в таблице со строками, которые вычисляются в вычисляемом свойстве.Однако я получаю следующую ошибку:

"Вычисленное свойство '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 () не будет работать.

Answer 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 переменной вместо константы