Convert a watch() to composition api in Inertia !

Hello i use the library from https://php-flasher.io/inertia/ that work good on a laravel app but when i want to use it on an inertia app i dont know how to convert this in the install tuto :

// resources/js/Shared/Layout.vue
<script>
import flasher from "@flasher/flasher";

export default {
  props: {
    messages: Object,
  },
  watch: {
    messages(value) {
      flasher.render(value);
    }
  }
}
</script>

How to convert this in composition api (the watcher part ...) in my AppLayout.vue ? I know how to use defineProps({}) but not the watch part ^^

Thanks you !

tykus

1 year ago

Level 104

You should be able to watch a prop like this:

<script setup>
  import { watch } from 'vue';
  import flasher from "@flasher/flasher";

  const props = defineProps({
    message: Object
  });

  watch(props.message, (value) => {
    flasher.render(value)
  })
</script>

AsnCode

1 year ago

Level 7

@tykus exactly same code as you, in watch() i added a console.log inside watch() and it dont launched after flash added in controller.

AsnCode

1 year ago

Level 7

My handleInertiaRequest.php

public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
            'user' => Auth::user() ? [
                'user' => [
                    'username' => Auth::user()->username,
                    'email'    => Auth::user()->email,
                ]
            ] : null,
            'messages' => flash()->render('array'),
            'categories' => [
                'all'    => Category::all(),
            ]
        ];
    }

My cController :

public function destroy(Capsule $capsule)
    {
        if ($capsule->preview) {
            Storage::disk('public')->delete($capsule->preview);
        }

        $capsule->delete();

        flash()->success('User created.');

        return Redirect::route('dashboard');
    }

I follow exactly the tutorial in library docs ... i dont know why the watch() method dont respond .... ?

k_nadam

1 year ago

Level 1

to spot the issue, try watching for the entire props object. like this:

watch(props, (value) => {
   console.log(value.message);
 })

Does this work?

Please or to participate in this conversation.