Pasar datos de Laravel a Vue.js usando variables globales

Pasar datos vue js

En el articulo anterior se aprendió como Pasar datos de Laravel a Vue.js usando Vue props, en esta ocasión se probará con otra técnica bastante útil y sencilla, usaremos variables globales en JavaScript.

 

Declaración de una variable global

Para declarar una variable global en Javascript, esta debería estar en el ámbito más amplio posible, para lograr esa condición usaremos el objeto window que representa a toda la “ventana” que contiene un documento DOM en nuestro navegador.

Así, en la vista /resources/views/layouts/app.blade.php agregamos dentro de la etiqueta <head>

 

Ahora hay una variable declarada como App en toda la ventana de nuestra aplicación.

 

Procesando con blade

Como puedes ver, el archivo donde agregamos la etiqueta <script> es un archivo .blade.php, esto le permite a laravel modificar y escribir el contenido de esa etiqueta a nuestro antojo.

Así que podemos usar clases, variables, funciones y muchas otras herramientas de laravel y php para que escriban el contenido que queremos enviar a Vue.js. Algunos ejemplos:

El siguiente fue tomado del código fuente de Laravel Spark 5.0

 

Accediendo a los datos en Vue.js

Como la variable App ya está disponible en JavaScript, se puede acceder a la información así:

 

Conclusión

Has aprendido un poco más del flujo de los datos entre PHP y JavaScript.

Ahora tienes a tu disposición otra estrategia para pasar datos de Laravel a Vue.js que puedes empezar a usar en tus proyectos.

 

Referencias

Javascript Scopes

Pasar datos de Laravel a Vue.js usando Vue props

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces