Vue.js 尝试获取要使用VUE排序的表

我目前正在为使用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>

批次ID
{{下降？'fas fa caret down'：'fas fa caret up'}
拉紧
{{下降？'fas fa caret down'：'fas fa caret up'}
类型
{{下降？'fas fa caret down'：'fas fa caret up'}
修剪
{{下降？'fas fa caret down'：'fas fa caret up'}
历史
{{下降？'fas fa caret down'：'fas fa caret up'}
{{item.name}
{{item.strain？item.strain.name:'-'}
{{item.type.name}
fas fa外部连接方形高度

JS

方法：{
排序（字段）{
如果（this.sortBy==字段）this.descending=！this.descending
否则{
这是真的
this.sortBy=字段
}
}
},
计算：{
分拣报告（）{
return[…this.filteredReports].sort（（a，b）=>{
如果（a[this.sortBy]b[this.sortBy]）返回this.descending？-1:1
否则返回0
})
}
}

因为它已经被排序了，所以我只使用javascript

reverse（）的computed属性

（然后向下箭头变成一个按钮，用于切换用于生成表的列表）

查看更多：.
是否已按升序排序了
sortedReports
，您只想在降序和升序之间切换？@nbixler是的，对不起，我没有添加。
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 
            })
        }
    }