Pasar datos de Laravel a Vue.js usando Vue props

pasar-datos-de-laravel-a-vue-js

Si lo piensas bien, pasar datos de Laravel a Vue.js se puede convertir en algo complicado.

Existen muchos métodos para lograrlo y en esta oportunidad voy a introducir uno de ellos: cómo pasar datos de Laravel a un componente Vue.js usando Vue props.

1. El caso más común describe lo siguiente: desde un controlador se retorna una vista con la variable $purchase.

En este punto, la vista y los datos incluidos en esta, están en nuestro Back End (Server Side) y este será el en cargado de procesarlos. Posteriormente, la vista llega a nuestro Front End (Client Side), y SOLO a partir de ese momento Vue.js podrá hacer uso de lo que en ella venga incluido.

2. En la vista usaremos un componente Vue.js que será nuestro punto de “anclaje”, piensa de él como un receptor de datos.

Como lo anuncié anteriormente, en esta ocasión se usara Vue props, así que pasaremos a una rápida explicación (101 – Introducción).

Vue props 101

Un prop es un atributo personalizado usado para pasar información a un componente.

1. Se declara el prop que el componente espera recibir.

2. Se pasan los datos a través de la propiedad.

El componente purhase-preview tiene un prop identificado como title con el valor de Compra de Juegos PS4.

Pero los problemas vienen cuando no es un string lo que queremos pasar, qué tal si lo queremos tratar como un entero, un array, un objeto, etc… Pues Vue.js se hace cargo de evaluar lo que estamos pasando si utilizamos Dynamic Props.

Vue dynamic props 101

Tienen el mismo objetivo que los anteriores props, pero con la ventaja de que ahora su valor será tratado como una expresión de JavaScript.

Para usarlos se antecederá al nombre del prop con “dos puntos” (:) o con la palabra v-bind:.

Si lo hacemos así, el ejemplo anterior dará un error, pues lo que estamos pasando (Compra de Juegos PS4) NO es una expresión válida en JavaScript (lo puedes verificar en la consola de tu navegador). Javascript necesita expresiónes que pueda “entender”;  si queremos arreglar este ejemplo lo podemos hacer pasando un string válido para Javascript.

Tip 1: Usa dynamic props, obtienes el mismo resultado, y además, tienes el poder de pasar expresiones de JavaScript.

Tip 2: Si estás teniendo problemas usa la consola de tu navegador, si el navegador entiende la expresión es muy probable que la puedas usar como un dynamic prop.

Algunos ejemplos son:

Integrando con PHP…

El componente Vue debe recibir una expresión JavaScript válida, y pues JavaScript entiende perfectamente datos formateados en JSON.

Así, trataremos de generar datos con formato JSON desde PHP. Y por supuesto, PHP tiene una función que hace este trabajo.

json_encode() “retorna un string con la representación en JSON del valor suministrado”

A continuación algunos de los más comunes casos que puedes encontrar en tu día de trabajo.

Boolean

Integer

Float

String

Array

Array With Keys

Objects

Null

Eloquent Model

Json Encoded

 

Conclusión:

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

Ahora tienes a tu disposición una de las formas de pasar datos de Laravel a Vue.js que funciona muy bien, es sencilla de entender para cuando estamos aprendiendo y que puedes empezar a usar en tus proyectos.

 

Referencias:

Vue.js 2 – Props

Laravel 5.5 – Blade Templates

PHP – json_enconde()

Comparte este artículo

Entra en la discusión y deja tu comentario

  • Marco A. Feregrino

    Me parece mala práctica tener código de esa forma en las vistas. Lo mejor sería hacer llamadas ajax con axios o vue resource.

    • Eduardo Gh

      Hola Marco.

      Esta es una de las muchas formas que hay para para pasar datos de Laravel a Vue.js, espero tener la oportunidad de escribir sobre axios y ajax.

      Como siempre, la decisión es del desarrollador y depende mucho del entorno en que se encuentre.

      Gracias por comentar y expresar tu punto de vista.

  • Gonza

    Genial! Me gustó el post!

Veces