当连接到 InertiaJS 中的 Laravel 控制器时，Vue 日历切换回当前月份

Question

在 Laravel Jetstream 应用程序（使用 VueJS 和 Laravel）中，我有一个简单的月历页面（使用 this example from CSS Tricks），效果很好。我让它工作得很好，而且它可以切换几个月。

它连接到一个 Laravel 控制器，该控制器可以正常工作；

    public function calendar()
    {
         $now = Carbon::now();
         $currYear = $now->year;
         $currMonth = $now->month;

         $newMonth = request('newMonth');
         $newYear = request('newYear');

         $queryYear = $newYear ?: $currYear;
         $queryMonth = $newMonth ?: $currMonth;

         $thisMonth = Shift::where(DB::raw('MONTH(date)'), $queryMonth)
             ->where(DB::raw('YEAR(date)'), $queryYear)
             ->with('user', 'station')->get();

        return Inertia::render('Shifts/CalendarMonth', [
           'shifts' => $thisMonth
        ]);
    }

更改月份时，它会发出一个事件（请参阅我在 CalendarHome.vue

<CalendarDateSelector
    :current-date="today"
    :selected-date="selectedDate"
    @dateSelected="selectDate"
/>

...
<script>
    data() {
        return {
            selectedDate: dayjs()
        };
    },
    methods: {
        selectDate(newSelectedDate) {
            this.selectedDate = newSelectedDate;

            const newMonth = dayjs(this.selectedDate).month() + 1;
            const newYear = dayjs(this.selectedDate).year();

            this.$inertia.visit('calendar', {
                data: {
                    newMonth: newMonth,
                    newYear: newYear
                }
            });
        }
    }
</script>

这里是上面引用的 <CalendarDateSelector> 组件的 <template> 部分：

<template>
    <div class="flex text-gray-800 select-none cursor-pointer">
        <span class="mr-5" @click.prevent="selectPrevious">&lt;</span>
        <span @click="selectCurrent">Today</span>
        <span  class="ml-5" @click.prevent="selectNext">&gt;</span>
    </div>
</template>

因为我只需要获取数据，所以我使用 $inertia.visit，控制器会做它应该做的事情，returns 正确的记录。

问题是日历最初更改为正确的月份，但随后又回到当前月份。例如，如果当前月份是 9 月，我单击箭头转到 8 月，最初显示的日期会更改为 8 月，然后跳回 9 月（如果我尝试转到下个月，也会发生同样的情况） .当我查看 Vue 开发工具时，'shifts' 道具包含八月份的预期记录。

没有调用 $inertia.visit()，日历工作正常；只有当我在 selectDate 方法中添加对 Laravel 端点的调用时，我运行才会出现问题，所以我确定问题不在 Vue 代码中。是什么导致了这种情况的发生，尤其是当控制器返回正确的记录时？

更新： 在进行了一些逐步调试之后，似乎我的 selectedDate 值正在重新初始化，因为页面正在重新加载，即使我通过preserveState: true。问题是否可能是我没有使用 <inertia-link> 作为我的日历导航链接？

更新 2： 我检查了我的 Inertia 请求的网络选项卡，X-Inertia header 正在发送 true 值，因此页面不应重新加载。

Answer 1

所以修复是 preserveState:

this.$inertia.visit('calendar', {
    preserveState: true,
    data: {
        newMonth: newMonth,
        newYear: newYear
    }
});

有了它，我就可以在月份之间切换并获取更新的数据。

当连接到 InertiaJS 中的 Laravel 控制器时，Vue 日历切换回当前月份

Vue calendar switches back to current month when connected to Laravel controller in InertiaJS

javascript

php

inertiajs

laravel

vue.js