inertiajs / inertia-laravel

The Laravel adapter for Inertia.js.
https://inertiajs.com
MIT License
1.99k stars 222 forks source link

Vue Watch not working upon redirect route #604

Closed kinger251285 closed 3 months ago

kinger251285 commented 3 months ago

"inertiajs/inertia-laravel": "^0.6.8" "laravel/framework": "^10.10" "laravel/jetstream": "^4.0" "vue": "^3.2.31"

Problem

Watch in Vue 3 not working when: return redirect()->route()->with('message', $Message);

Works Perfectly with: return back()->with('message', $Message);

HandleInertiaRequest.php

return [
            ...parent::share($request),
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ];

Layout.vue

<script setup>
  import { Head, Link, router, usePage } from '@inertiajs/vue3';

  const page = usePage();

  const flash = computed(() => page.props.flash);
  const message = computed(() => page.props.flash.message);

  const showSuccess = ref(false);

  watch(flash, async (newFlash, oldFlash) => {    
    console.log('hit');
    if(message.value != null){
      showSuccess.value = true;
    }
  });

</script>

This works absolutely fine when i redirect back but not when redirecting to route (with all the methods via the docs) too.

If i update flash.message via a function in the child of Layout.vue this does not trigger the watch either.

If i change the watch to the below and update the message via the child component function then it also triggers the watch:

 watch(message, async (newFlash, oldFlash) => {    
    console.log('hit');
    if(message.value != null){
      showSuccess.value = true;
    }
  });

I can get it to work how i want in a hacky way via the below:

router.on('success', (event) => {
    if(message.value != null){
        showSuccess.value = true;
    }
});

I've confirmed in vue devtools that the prop is also being updated as expected. It almost feels as though the old value matches the new value on redirect.

But would like to understand why the watch is not working and if there is any fix or better way or whether it is in fact a bug?

driesvints commented 3 months ago

Hey there,

Can you first please try one of the support channels below? If you can actually identify this as a bug, feel free to open up a new issue with a link to the original one and we'll gladly help you out.

Thanks!

MarlonEtiene commented 2 months ago

Sorry for reopen this thread but I have the exactly same problem