No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Flash message

16/20
Recursos

Aportes 8

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Vale, esto es importante:
.
Al parecer en la nueva actualizaci贸n de Laravel (o Inertia), ya no se puede acceder directamente a $page.flash porque sino dar谩 error (y de hecho no te mostrar谩 nada y si inspeccionas te mostrar谩 todo en blanco porque te dice que no puede acceder a la propiedad status de undefined).
.
Para solucionar esto, ahora deben acceder primero a una propiedad llamada props, algo as铆:

<div v-if="$page.props.flash.status" class="bg-blue-500 text-white text-sm font-bold p-4">
    <p>{{ $page.props.flash.status }}</p>
</div>

Flash message


Para crear un canal de comunicaci贸n entre PHP y Vue.js, tenemos que ir a App/Providers al archivo AppServiceProvider.php. Y dentro del m茅todo p煤blico boot, escribimos:

Inertia::share('flash', function () {
     return ['status' => Session::get('status')];
});

Con esto, ahora en las redirecci贸n al terminar de ejecutarse un m茅todo, podemos enviar el estatus y un mensaje. As铆:

return redirect()->route('notes.index')->with('status', '馃敟 Nota eliminada');

Despu茅s en el archivo AppLayout.vue creamos una condicional en Vue que reciba este mensaje.

<div v-if="$page.props.flash.status" class="bg-blue-500 text-white text-sm font-bold p-4">
    <p>{{ $page.props.flash.status }}</p>
</div>

Con el siguiente c贸digo les muestra los errores, por ejemplo aquellos generados por validate desde el controlador.
Es interesante todo lo que se puede obtener con $page, aqu铆 incluso muestra los datos del usuario que se ha logeado.
Utilizo el m茅todo Object.key().length y no length directamente ya que se trata de un objeto, no de un arreglo.

<div v-if="Object.keys($page.props.errors).length != 0" class="bg-red-500 text-white text-sm font-bold p-4">
           <ul>
                  <li v-for="error in $page.props.errors" :key="error">
                       {{ error }}
                 </li>
          </ul>
</div>

AppLayout.vue si quieren darle estilos diferentes dependiendo de la acci贸n realizada pueden usar este c贸digo que hice en mi proyecto, le da un 鈥榯oque鈥 diferente a la UX

<main>
                <div v-if="$page.props.flash.status == 'Nota creada'" class="bg-green-500 text-white text-sm font-bold p-4">
                    <p>{{ $page.props.flash.status }}</p>
                </div>
                <div v-if="$page.props.flash.status == 'Nota actualizada'" class="bg-blue-500 text-white text-sm font-bold p-4">
                    <p>{{ $page.props.flash.status }}</p>
                </div>
                <div v-if="$page.props.flash.status == 'Nota eliminada'" class="bg-red-500 text-white text-sm font-bold p-4">
                    <p>{{ $page.props.flash.status }}</p>
                </div>
                <slot></slot>
            </main>```

error: Vue warn]: Error in render: 鈥淭ypeError: Cannot read property 鈥榮tatus鈥 of undefined鈥

found in

鈥> <AppLayout> at resources/js/Layouts/AppLayout.vue
<Index> at resources/js/Pages/Notes/Index.vue
<Inertia>
<Root>

Si quisieras darle al usuario poder de cerrar el mensaje flash, puedes hacerlo de esta forma 馃憤

<span @click="$page.props.flash.message = false">
       Cerrar
 </span>

Tambien quiero dejar este aporte, si desean agregar un mensaje de error en la validaci贸n de sus formularios, puede sagregar esta linea seg煤n el key que esten usando 馃憤

<div v-if="$page.props.errors.excerpt">{{ $page.props.errors.excerpt }}</div>

muchachos gracias por sus aportes鈥