Vue3sortedArray 未正确更新排序

Question

我有这个排序数组，我在其中使用 v-for 来显示所有服务项目。每个项目都有一个 stationName、startDate 和 endDate。我正在使用 lodash 按数组内的特定键进行排序。

看不出我做错了什么。有人可以帮忙吗？我尝试了多种方法但无法使其发挥作用。 我希望能够按结束日期、开始日期和电台名称排序。

<script setup lang="ts">
    import { computed, onMounted, ref } from 'vue';
    import { orderBy } from 'lodash';

    // Types
    import type { Stationwork } from 'types/store/stationworks';

    // Store
    import { useStationStore } from 'store/stations';
    import { useStationworksStore } from 'store/stationworks';

    // Components
    import BaseIcon from 'components/atoms/BaseIcon.vue';
    import MultiSelect from 'components/molecules/MultiSelect.vue';
    import StationWorksListItem from 'components/molecules/StationWorksListItem.vue';

    // Composables
    import { useComponent } from 'composable/component';

    const stationStore = useStationStore();
    const stationworksStore = useStationworksStore();

    const module = 'v-station-works-list';

    const selectedStations = ref<any>([]);
    const selectedFields = ref<string[]>(['filterCurrent']);

    const filterFieldOptions = ref([
        { id: 1, text: 'Filter zichtbaarheid in infobox', value: 'filterVisible' },
        { id: 2, text: 'Filter actuele werkzaamheden', value: 'filterCurrent' }
    ]);

    const { childClass } = useComponent(module);

    const handleSelectUpdate = (selected: string) => {
        selectedStations.value = selected;
    };

    const currentStationsOptions = computed(() => stationworksStore.currentStationsOptions);

    const mapStation = (station: Stationwork) => ({
        uuid: station.uuid,
        stationCode: station.stationCode,
        stationName: stationStore.getStationName(station.stationCode),
        workSubject: station.workSubject,
        startDate: station.startDate,
        endDate: station.endDate,
        workContent: station.workContent,
        showWork: station.showWork
    });

    const currentStationWorks = computed(() => {
        const filterCurrent = selectedFields.value.includes('filterCurrent');
        const filterVisible = selectedFields.value.includes('filterVisible');

        const works = stationworksStore.works
            .filter((station: Stationwork) => {
                const isSelectedStation = selectedStations.value.includes(
                    stationStore.getStationName(station.stationCode)
                );

                if (!isSelectedStation) {
                    return false;
                }

                if (filterCurrent) {
                    const startDate = station.startDate ? Date.parse(station.startDate) : false;
                    const endDate = station.endDate ? Date.parse(station.endDate) : false;

                    if (!startDate) {
                        return false;
                    }

                    const isBeforeToday = startDate <= Date.now();
                    let isInFuture = false;

                    if (endDate) {
                        isInFuture = endDate >= Date.now();
                    }

                    const isInCurrentRange =
                        startDate && endDate ? isBeforeToday && isInFuture : isBeforeToday;

                    if (!isInCurrentRange) {
                        return false;
                    }
                }

                if (filterVisible && !station.showWork) {
                    return false;
                }

                return true;
            })
            .map(mapStation);

        return works;
    });

    const moduleClasses = computed(() => ({
        [module]: true
    }));

    enum SortCriteria {
        STATION = 'stationName',
        START_DATE = 'startDate',
        END_DATE = 'endDate'
    }

    const sortOrder = ref<'asc' | 'desc'>('asc');

    const sortedArray = computed(() => {
        return orderBy(currentStationWorks.value, [SortCriteria.STATION], [sortOrder.value]);
    });

    const sortBy = (criteria: SortCriteria) => {
        sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';

        const sortedWorks = orderBy(currentStationWorks.value, [criteria], [sortOrder.value]);


        currentStationWorks.value = sortedWorks;
    };

    onMounted(async () => {
        selectedStations.value = stationworksStore.currentStationsOptions;

        if (!stationStore.stations.length) {
            await stationStore.fetchAll();

            selectedStations.value = stationworksStore.currentStationsOptions;
        }
    });
</script>

<template>
    <div :class="moduleClasses">
        <div :class="childClass('container')">
            <div :class="childClass('content')">
                <h1 :class="childClass('title')">Stationswerkzaamheden</h1>
                <p :class="childClass('text')">
                    Mogelijkheid filteren op station, selecteer station(s)
                </p>
            </div>

            <div :class="childClass('holder')">
                <div :class="childClass('header')">
                    <MultiSelect
                        class="w-full max-w-2xl"
                        v-if="currentStationsOptions.length"
                        all_option_text="Alle stations"
                        num_text=" stations geselecteerd"
                        all_text="Alle stations geselecteerd"
                        placeholder="Selecteer station(s)"
                        :initial_value="currentStationsOptions"
                        :choices="currentStationsOptions"
                        :update_while_opened="true"
                        :options_show_full="1"
                        @select-update="handleSelectUpdate"
                    />

                    <BaseIcon
                        v-else
                        icon="loader"
                        class="animate-spin text-lg text-ns-light-blue"
                    />

                    <div class="ml-auto flex flex-col items-center gap-x-6 gap-y-2 lg:flex-row">
                        <div
                            class="flex items-center"
                            v-for="field in filterFieldOptions"
                            :key="field.id"
                        >
                            <input
                                :id="field.value"
                                type="checkbox"
                                class="h-5 w-5 shrink-0 border-ns-light-gray bg-gray-100 accent-ns-light-blue focus:ring-ns-blue"
                                :name="field.text"
                                v-model="selectedFields"
                                :value="field.value"
                            />
                            <label :for="field.value" class="ms-2 cursor-pointer text-sm">{{
                                field.text
                            }}</label>
                        </div>
                    </div>
                </div>

                <div :class="childClass('station-header')">
                    <span class="col-span-2">Station</span>
                    <span class="col-span-3 lg:col-span-4">Omschrijving</span>
                    <span class="col-span-2 lg:col-span-1">Startdatum</span>
                    <span class="col-span-2 lg:col-span-1" @click="sortBy(SortCriteria.END_DATE)"
                        >Einddatum</span
                    >
                    <span class="col-span-3 lg:col-span-4">Uitgebreide omschrijving</span>
                </div>

                <div v-if="currentStationsOptions.length" :class="childClass('overview')">
                    <StationWorksListItem
                        v-for="station in sortedArray"
                        :key="station.uuid"
                        :station="station"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

Answer 1

在我看来，您正在使用静态值作为排序键：

   const sortedArray = computed(() => {
    return orderBy(currentStationWorks.value, [SortCriteria.STATION], [sortOrder.value]);
});

[SortCriteria.STATION]

应该是一种状态。