Pasar datos de Laravel a Vue.js usando Vue props y directivas blade

pasar_datos_de_laravel_a_vue-js_2

En el articulo “Pasar datos de Laravel a Vue.js usando Vue props” se demostró que usando Vue dynamic props y la función json_enconde() de PHP se podía compartir datos entre Laravel y Vue.js de una forma muy sencilla.

Esta técnica funciona muy bien, pero la podemos llevar al siguiente nivel usando las directivas de blade, y tener algo como:

Aclaración: Esta propuesta fue compartida inicialmente por Adam Wathan en twitter, pero se ha quedado atrás en su largo historial de aportes, por lo que vale la pena revivirla.

En esta oportunidad, vamos a indagar alrededor de los temas que nos llevarán a poder usar esa sintaxis en nuestros proyectos.

Directivas de blade

Las directivas como: @if, @section, @foreach, @include, entre otras… se usan en archivos .blade.php. Laravel procesa y compila estos archivos en otros archivos .php, con sintaxis que php puede procesar.

Podemos aprovechar este potente motor de plantillas para generar herramientas como la que describimos al inicio.

Directivas de blade personalizadas

Para agregar una directiva que no viene incluida en el framework Laravel. Tendremos que “extender” su sistema de plantillas blade.

1. Agregar una directiva propia (personalizada).

Las directivas personalizadas aceptan un solo parámetro, y por eso, puede parecer extraño que aunque tengamos una , (coma) separando los argumentos, lo que hay en la variable $expression es literalmente lo que escribimos en la directiva.

Por ejemplo al usar @prop('purchase', $purchase)  la variable $expressión contiene:  'purchase', $purchase.

2. Crear una clase para aislar un poco la lógica y poder escribir una función que coincida con el formato buscado.

En el directorio app/ crear el archivo Vue.php.

La función prop aceptaría los dos parámetros e imprimiría exactamente lo que necesitamos :name='value'.

3. Ahora le debemos indicar a blade, qué es lo que debe imprimir…

Para ello actualizamos en AppServiceProvider la definición de la directiva @prop.

De esta forma, una vez se compile el archivo .blade.php se verá algo como:

Puedes comprobar el resultado explorando las vistas generadas en el  directorio storage/framework/views/.

Finalmente, cuando la vista se entregue al cliente, por ejemplo, en el navegador se puede ver algo como:

Y esto es exactamente lo que buscamos. Lo puedes comprobar en tu navegador viendo el código fuente (View Page Source) de la vista.

Conclusión

Aprendiste a crear directivas personalizadas para plantillas .blade.php.

Ahora puedes usar:

Una técnica que para mí, se ve muy bien, tiene mucho sentido y ahora está a tu disposición por si quieres implementarla en tus proyectos.

 

Referencias

Laravel 5.5 – Extending Blade

Vue.js 2 – Props

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces