javascript

Llenar select con Vue usando v-for

Elemento select con Vue.js y v-for

En este artículo te mostraré cómo renderizar un select (elemento HTML) o lista desplegable de HTML con Vue.

Es decir, a partir de una lista de objetos, llenar un select y saber cuál elemento está seleccionado.

Los datos

Puedes obtener el arreglo como quieras. En mi caso tengo una lista de docentes:

See the gist on github.

Recuerda que debe ser una propiedad de tu componente, es decir, debería estar asignado a la app con this.docentes.

Modelo seleccionado

Ahora vamos a ver cómo saber cuál elemento del select está, valga la redundancia, seleccionado. Definimos una variable:

See the gist on github.

Con eso tenemos. Ahora veamos la vista.

Renderizar select

Un elemento select lleva varios elementos option. Con vue no cambia nada, es cuestión de:

Asignar un modelo con v-model que apuntará al elemento seleccionado
Hacer un v-for para renderizar la lista

Así que queda así:

See the gist on github.

Se puede observar que en value usamos el binding de Vue, con :value, asignando todo el objeto; porque estamos recorriendo un arreglo de objetos con v-for.

Lo que se muestra en la lista es el nombre del docente, usando las llaves. Ahí puede ir cualquier texto acompañando a la expresión.

Finalmente, el modelo es ligado con v-model en el select. Y mostrado en un lugar separado.

Ahora, cada que se selecciona un nuevo elemento de la lista, el seleccionado se actualiza. Con este objeto ya podemos hacer cualquier cosa dentro del componente:

Elemento select con Vue.js y v-for

Conclusión

También puedes dibujar un arreglo de elementos planos, que no sean objetos.

Por otro lado, dentro del v-model puedes asignar solo una propiedad del objeto, no es necesario asignar el objeto completo.

Te invito a leer más sobre Vue.js, o a leer mis ejemplos de código con JavaScript.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Siguiente preg_replace en PHP con ejemplo »

Anterior « Creando una librería HTTP de JavaScript

Ver comentarios

Ivan dice:

noviembre 7, 2020 en 3:16 pm

Muchas gracias por tu aporte, mi pregunta es, como guardos los datos múltiples seleccionados? yo usé la función json_encode($request->data) para cambiar el array a string y poder guardarlo en la base, pero como hago para editar el formulario? como leo esos datos de la base y hago que el select multiple tenga los datos seleccionados de la base?
espero me puedas ayudar, muchas gracias nuevamente