无法通过单击列来取消对表格的排序 - Vue.js答案

【问题标题】：Unable to unsort the table by clicking the column - Vue.js无法通过单击列来取消对表格的排序 - Vue.js
【发布时间】：2021-06-25 18:34:28
【问题描述】：

当我从 Laravel Livewire 转移到 Laravel Vue 时，我无法重新创建在 Vue 中排序所需的逻辑。我可以通过单击表格标题成功地对表格进行排序。现在，我需要的是，当sortDirection 为“desc”时，之后的单击应该取消对列的排序，就像在下面显示的 Livewire 组件示例中一样。请帮助我在 vue 中实现这一点。

用户索引 Vue 组件 - 当前行为

用户索引 Livewire 组件 - 必需的行为

用户索引 Vue 组件 - 脚本

<script>
    export default {
        props : ['users'],
        data() {
            return {
                sortField: '',
                sortDirection: 'asc'
            }
        },
        methods: {
            sortBy: function(column) {
                if (column === this.sortField) {
                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                } else this.sortDirection = 'asc';
                this.sortField = column;
            }
        },
        computed:{
            sortedUsers: function() {
                return this.users.sort((a, b) => {
                    let modifier = 1;
                    if (this.sortDirection === 'desc') modifier = -1;
                    if (a[this.sortField] < b[this.sortField]) return -1 * modifier; 
                    if (a[this.sortField] > b[this.sortField]) return 1 * modifier;
                    return 0;
                });
            }
        }
    }
</script>

用户索引 Vue 组件 - 模板

<template #head>
    <data-table-heading sortable :direction="sortField === 'id' ? sortDirection : null" @click="sortBy('id')" class="pr-0">ID</data-table-heading>
    <data-table-heading sortable :direction="sortField === 'name' ? sortDirection : null" @click="sortBy('name')">Name</data-table-heading>
    <data-table-heading sortable :direction="sortField === 'email' ? sortDirection : null" @click="sortBy('email')" class="w-screen">Email</data-table-heading>
    <data-table-heading sortable :direction="sortField === 'role' ? sortDirection : null" @click="sortBy('role')">Role</data-table-heading>
    <data-table-heading sortable :direction="sortField === 'created_at' ? sortDirection : null" @click="sortBy('created_at')">Date</data-table-heading>
</template>

数据表标题 Vue 组件 - 模板

<span class="relative flex items-center">
    <div v-if="direction === 'asc'">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
    </div>
    <div v-else-if="direction === 'desc'">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
        </svg>
    </div>
    <div v-else>
        <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
        </svg>
    </div>
</span>

编辑

Livewire 组件排序

public $sorts = [];

public function sortBy($field)
{
    if (! isset($this->sorts[$field])) return $this->sorts[$field] = 'asc';

    if ($this->sorts[$field] === 'asc') return $this->sorts[$field] = 'desc';

    unset($this->sorts[$field]);
}

【问题讨论】：

标签： javascript laravel vue.js vuejs3

【解决方案1】：

我从逻辑上了解到，更改sortDirection的状态有问题，是因为我们没有将其重置为正常状态。

要将sortDirection 恢复正常，请使用以下代码：

sortBy: function(column) {
                if (column === this.sortField) {
                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : this.sortDirection == '' ? 'asc' : '';
                } else this.sortDirection = 'asc';
                this.sortField = column;
            }

【讨论】：