尝试使用 VUE 对表进行排序答案

【问题标题】：Attempting to get a table to sort with VUE尝试使用 VUE 对表进行排序
【发布时间】：2020-06-22 17:48:56
【问题描述】：

我目前正在努力将排序功能添加到使用 vue 构建的表中，我不确定我缺少什么，因为我的代码获得了降序箭头，但实际上并未对列进行排序。我已经添加了表格和表格的 vue 代码。任何帮助将不胜感激。

HTML 表格

<v-simple-table>
                        <template v-slot:default>

                            <thead>
                                <tr>
                                    <th class="text-center" @click="sort('name')">
                                        <div>Batch ID</div>
                                        <v-icon small v-if="sortBy === 'name'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('strain')">
                                        <div>Strain</div>
                                        <v-icon small v-if="sortBy === 'strain'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('type')">
                                        <div>Type</div>
                                        <v-icon small v-if="sortBy === 'type'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('trim')">
                                        <div>Trim</div>
                                        <v-icon small v-if="sortBy === 'trim'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('history')">
                                        <div>History</div>
                                        <v-icon small v-if="sortBy === 'history'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr v-for="item of filteredReports" :key="item.id">
                                    <td class="text-center">{{item.name}}</td>
                                    <td class="text-center">{{item.strain ? item.strain.name : '-'}}</td>
                                    <td class="text-center">{{item.type.name}}</td>
                                    <td class="text-center">
                                        <phase-chip
                                            :report="item.trim"
                                            type="trim"
                                        ></phase-chip>
                                    </td>
                                    <td class="text-center">
                                        <v-btn icon color="primary" small :to="`/batches/${item.batch}/history`" target="_blank">
                                            <v-icon>fas fa-external-link-square-alt</v-icon>
                                        </v-btn>
                                    </td>
                                </tr>
                            </tbody>

                        </template>
                    </v-simple-table>

methods : {
        sort(field) {
            if (this.sortBy === field) this.descending = !this.descending
            else {
            this.descending = true
            this.sortBy = field
            }
        }
    },

computed: {
        sortedReports () {
            return [...this.filteredReports].sort((a,b) => {
                if (a[this.sortBy] < b[this.sortBy]) return this.descending ? 1 : -1
                else if (a[this.sortBy] > b[this.sortBy]) return this.descending ? -1 : 1
                else return 0 
            })
        }
    }

【问题讨论】：

sortedReports 是否已经按升序排序，而您只想在降序和升序之间切换？
@nbixler 是的，抱歉，我没有添加。

标签： vue.js

【解决方案1】：

由于它已经排序，我只需使用带有 javascript 的计算属性reverse()

（然后向下箭头变成一个按钮，用于切换您使用哪个列表来生成表格）

【讨论】：