20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.

js+select2

Creación de un Select dependiente con

laravel 5.4+vue.js+select2
hemnys chacon Follow
Jul 31, 2017 · 7 min read

Hola a todos! este es mi primer post en medium, así que pido disculpas
por mi redacción, es la primera vez que me desenvuelvo como redactor,
así que deseenme suerte y bueno!!! a hablar sobre el titulo del post!!.

Para el siguiente ejemplo he trabajado con las siguientes herramientas;

servidor web: AMPPS, Editor de Texto : Sublime Text, Framework
Backend: Laravel 5.4, Framework Frontend: Vue.js(Es necesario que
previamente instalen node.js en sus maquinas); El tipo de select que
vamos realizar para este ejemplo es la relacion Paises-Estado. Ahora sí
con nuestras herramientas listas a programar se ha dicho.

Abrimos nuestro terminal y en la carpeta www del proyecto ejecutamos

el siguiente codigo (blog es un nombre opcional, pueden usar el que uds
les guste)

Ahora procedemos a ejecutar el comando npm install, donde se

descargarán todas las dependencias de node.js necesarias para poder
ejecutar el vue y el select2.

Una vez tengamos las dependencias de Node listas, creamos una base
de datos (Mysql); y la añadimos a nuestro archivo .ENV

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 1/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Luego vamos a crear nuestras tablas junto a sus Seeders para poder
tener Datos y hacer funcionar el ejemplo, los comandos utilizados son :

La estructura de las migraciones son las siguientes

migracion de countries

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 2/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

migracion de states

La estructura de los seeder son las siguientes

Seeder de Countries

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 3/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Seeder de States

IMPORTANTE!!!: recuerden activar los seeder en el archivo

DatabaseSeeder.php

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 4/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Ahora sí, vamos a crear las rutas y el Controlador que nos va permitir
proporcionar la data para llenar con información los Selects que
consumiremos en el Front-end con Vue.js

Routes Utilizadas en el ejemplo

Debemos recordar que para crear el controlador utilizamos el comando

php artisan make:controller ServiceController — resource

Ahora vamos con otra parte importante para que este proyecto
funcione y son los modelos, los vamos a llamar countries y states, a
continuación les muestro la estructura de cada uno.

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 5/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Modelo Countries

Modelo States

Ahora con la ayuda de las siguientes Funciones podremos acceder a los

datos almacenados en las tablas previamente creada

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 6/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Codigo del Controller

Analizando el codigo anterior, podemos observar que las funciones

creadas me van a retornar un json, pero Uds. se preguntarán: ¿Por qué
estoy retornando la data con el formato de id, text?; ¡OK! no se
preocupen, es la manera como la libreria select2 consume la data para
poder renderizarlos en la vista(para mayor información pueden ver el
siguiente link).

Ahora surge otra pregunta: ¿Cómo voy a saber que esta locura esta
funcionando antes de crear la vista, añadiendo el vue y la libreria del

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 7/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

select2?

Laravel provee un comando especial que permite crear una especie de

servidor virtual cuya sintaxis es php artisan serve, y que accediendo a
traves del navegador podemos observar el funcionamiento del codigo
tal cual como las vistas a continuación:

Retornando los valores de la primera función del controlador, que imprime el valor de los paises

retornando los valores de los estados pertenecientes a un pais

Si bien apreciamos la segunda imagen tenemos en la url estamos

pasando el valor 1, el cual nos ayudará a mostrar la información
correspondiente al pais con id 1.

Al ver que nuestros JSON funcionan, haremos uso de estos para

renderizar la vista en forma de selects a traves del vue y el select2, a
efectos de este ejemplo he editado la pagina principal que trae laravel
por defecto(revisar el archivos en views llamado welcome.blade.php),
y lo primero que hice fue quitar la información de ejemplo y añadir la
librería

La anterior librería es un compilado que incluye laravel 5.4 en la cual ya

trae el vue.js, ahora para poder saber que funciona, dentro del cuerpo
del archivo welcome.blade.php hacemos lo siguiente

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 8/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

nuevo cuerpo del archivo welcome.blade.php

Es muy importante crear un div con el id app, ya que este será el

contenedor padre de todo lo que hagamos en vue, como podemos
observar, las etiquetas example no son propias de html5, pero vue las
utiliza para poder renderizar sus componentes, así que surgen las
siguientes preguntas:

¿Donde están los archivos de componentes de vue en laravel?

R: /resources/assets/js/components

¿Donde voy a escribir la sintaxis de vue para añadirle el

funcionamiento a la vista?

R: /resources/assets/js/app.js

Una vez ubicados el directorio de los componentes y el archivo

principal para escribir la sintaxis de vue, ya podemos dar vida a la vista
y lograr el objetivo de este tutorial (si has llegado hasta acá te felicito,
incluso para mí ha sido un reto hacer este tutorial, con el tiempo iré
mejorando, por ahora, tengan un poco de paciencia XD)

Para este ejemplo he tomado como referencia el codigo que ofrece la

documentación de vue para integrar una libreria de jquery con vue lo
pueden observar en el siguiente link, para habilitar el select2 en
nuestro ejemplo lo primero que haremos es instalar via npm el select2
mediante el comando npm install select2

Ya instalada la libreria, procedemos a crear un nuevo componente en el

directorio respectivo, el cual llamaremos select.vue, y le damos la
siguiente estructura

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 9/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

template del select junto a su funcionabilidad

En el codigo anterior podemos apreciar como generamos un

componente en vue, tiene sus respectivos props, los cuales responden a
la comunicación del padre hacia el hijo, ya luego podemos ver codigo
netamente de la libreria select2, y algo muy importante y crucial para
este ejemplo es como emitimos data desde el hijo hacia el padre

enviar informacion del hijo hacia el padre

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 10/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Ya una vez creado el componente procedemos a invocarlo en el archivo

app.js para poder utilizarlo en cualquier otro componente o en algun
lugar del codigo html del proyecto, ¿Como lo añadimos?, Sencillo aqui
les muestro:

invocando nuestro componente select2 en el proyecto de vue

Ahora en nuestro componente example haremos uso del select2 y ya

por fin podremos dar vida a este proyecto y poder renderizarlo en el
navegador.

Añadiendo el componente select2 a nuestra vista principal que tambien es otro componente

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 11/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Ya una vez definida las etiquetas select2 del componente, vemos que en
sus atributos posee el :options=”countries”, que es la data que vamos a
utilizar para poder llenar los options de dicho select, el v-
model=”Country” es la variable que va a capturar el valor del select y el
@input=”getStates” , es el puente de comunicación entre el hijo y el
padre para poder pasar el valor que capturamos del select y enviarlo a
cualquier metodo, propiedad computada o algun otro elemento del
padre en vue.

Uds. se preguntarán,¿Cómo vamos a consumir los json previamente

creados y que sirvan para dar vida a estos componentes?, Fácil; en este
mismo componente añadimos la siguiente lógica (justo debajo de la
etiqueta </template>)

Código para añadir la data de los JSON

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 12/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

Ahora sí, guardamos, nos vamos a la consola y corremos el comando

npm run watch para poder compilar nuestros componentes y listo al
navegador a probar como funcionan nuestros selects dependientes.
Aqui les dejo una muestra de lo que vamos a obtener en el navegador

Data del Select de Pais

Ahora veremos la data de los Estados que corresponden al pais seleccionado

Listo amig@s, ya con esto podemos dar fin al tutorial, este es mi primer
post como lo dije al principio, espero que les guste, y ¡¡¡ah!!!, ¡¡¡claro!!!
aqui les tengo el repositorio, por si les da pereza copiar todo lo que hay
en las imagenes del post !!! :D

https://github.com/hemnys/selectVue

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 13/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 14/15
20/4/2019 Creación de un Select dependiente con laravel 5.4+vue.js+select2

https://medium.com/@hemnys25/creación-de-un-select-dependiente-con-laravel-5-4-vue-js-select2-957ac043bbdd 15/15