Flash message

Clase 16 de 20 • Curso de Single Page Applications en Laravel con Inertia y Vue.js

Carlos Eduardo Gomez García

teacher•

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>

Norberto Ruíz

student•

Muchas gracias! fue de mucha ayuda.

Gonzalo Garcia Ariño

student•

muchas gracias, a penas sucedió el error vine a los comentarios y estaba tu ayuda, saludos!

María Sierra

student•

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>

Lucero Olivos Adasme

student•

Gracias por tu aporte!!

Martín S. Campos

student•

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>

Gabriel Rodriguez

student•

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 'toque' 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>```

Francisco Hernandez

student•

Está interesante tu código, aunque creo que se podría refactorizar un poco.

Ali Pastor Reyes Adrian

student•

No te recomiendo hacer validaciones con cadenas, puede intentar pasar otra propiedad a flash, que sea un booleano o un numero, y dependiendo de ese numero o valor true o false asignas las clases que necesites

Miguel Bonifaz

student•

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>

Jorge Bou-saad

student•

Comparto mi commit de Laravel 9

https://github.com/jlbousing/platzi-inertia/commit/8e89ab4c1d12c2261ebe63d56f232a0da4bc5220

Remberto Alvaro Molina Colodro

student•

Según la documentación de Inertia, para crear este canal o mejor dicho compartir esta data se debe adicionar en el método share del midleware HandleInertiaRequests de la siguiente manera

    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'status' => fn () => $request->session()->get('status')
            ]
        ]);
    }

Máximo Calderon

student•

Excelente aporte compañero... Lo más difícil de estas sagas de cursos es mantenerse actualizado con los constantes cambios que van teniendo estos frameworks... Uno de loa aportes mas valiosos de este curso (creo yo). Gracias 💪💪💪

Luis Miguel Gil Torres

student•

¿No les pasa que al crear la nota, no les aparece el mensaje de 'nota creada'? Debido a que al crear se redirecciona a la ruta de edit. ¿A alguien mas le sucede?

Alexis Alexis Antonio Jiménez Joaquín

student•

error: Vue warn]: Error in render: "TypeError: Cannot read property 'status' of undefined"

found in

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

Ernesto Alejandro Muñoz Contreras

student•

Cambiaron la estructura ahora flash aparece esta dentro de $page.props de la funcion data del componente Inertia

<main>
                <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>
                <slot></slot>
            </main>

Danilo Vega

student•

A mi no me funciono con la correccion con props, ayuda por favor

Miguel Bonifaz

student•

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>

humberto viveros

student•

Buenísimo, y adicional a tu aporte, para traducir el mensaje de validación se puede hacer así. Debajo del array validate() agregar otro array

$request->validate([
  'excerpt' => 'required',
 ],
 [
   'excerpt.required' => 'El campo Resumen es obligatorio'
 ]
);

Emilio Vega

student•

muchachos gracias por sus aportes...