【发布时间】:2022-08-03 03:56:46
【问题描述】:
因为 InertiaJS 不会刷新相同的路由组件,所以无论您从后端传递多少次消息,诸如 flash 消息之类的东西都只会显示一次。我尝试了一切,但没有任何效果,我所需要的只是在我执行相同操作失败后能够再次触发相同的闪存消息。
控制器: 这应该作为我正在通过一些 if 语句进行的验证的一部分触发,所以基本上我是说如果请求的数量超过库存数量,则返回此消息。
return back()->with([
\'error\' => \'This item has only \' . $item->qty . \' items in stock\'
]);
闪存组件:
<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>
这工作正常,闪光灯出现,花了几秒钟然后消失。但无论我点击同一个按钮多少次来获取这条消息,它永远不会发生,我的大脑快要爆炸了!
标签: laravel vue.js single-page-application inertiajs