因為InertiaJS不會刷新相同的路由元件,所以無論你從後端傳遞多少次訊息,諸如閃現訊息之類的東西只會顯示一次。我嘗試了所有方法,但沒有任何效果,我所需要的只是在執行相同操作失敗後能夠再次觸發相同的閃存訊息。
控制器: 這應該作為我通過一些 if 語句進行驗證的一部分來觸發,所以基本上我是說,如果請求的數量超過庫存數量,則會返回此閃存訊息。
return back()->with([ 'error' => 'This item has only ' . $item->qty . ' items in stock' ]);
Flash元件:
<script setup> import { ref, onMounted } from "vue"; defineProps({ message: Object, }); const showNotif = ref(false); let msgs = ref([]); onMounted(() => { showNotif.value = true; setTimeout(() => { showNotif.value = false; }, 6000); }); </script> <template> <div> <Transition mode="out-in" name="flash" tag="div" enter-active-class="animate__animated animate__fadeInUp" leave-active-class="animate__animated animate__fadeOutDown" appear > <p v-if="message.error && showNotif" class="cursor-pointer fixed bottom-3 right-3 bg-red-600 px-5 py-1 font-semibold text-white rounded-xl" > {{ message.error }} </p> </Transition> <Transition mode="out-in" name="flash" tag="div" enter-active-class="animate__animated animate__fadeInUp" leave-active-class="animate__animated animate__fadeOutDown" appear > <p v-if="message.success && showNotif" class="cursor-pointer fixed bottom-3 right-3 bg-green-600 px-5 py-1 font-semibold text-white rounded-xl" > {{ message.success }} </p> </Transition> </div> </template>
這工作正常,閃光燈出現,花了幾秒鐘然後消失。但無論我點擊同一個按鈕多少次來獲取此閃現訊息,它都不會發生,我的大腦即將爆炸!
從這裡的文件中,您必須尋找
app /Http/Middleware/HandleInertiaRequests.php
並確保你有這樣的東西。基本上,您正在建立一個名為 flash 的共用資料屬性,它是一個帶有訊息鍵的關聯陣列(物件)。
請注意,如果您使用
with(['error => 'message here'])
,您將只能在前端取得資料。如果您想要成功
,您也必須自行添加它。您將獲得的資料範例
#