Llenar select con Vue usando 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:

let docentes = [
    {
        "id": 1,
        "nombre": "Luis",
        "contacto": "luis@gmail.com",
        "created_at": "2020-01-08 23:17:18",
        "updated_at": "2020-01-08 23:19:50"
    },
    {
        "id": 3,
        "nombre": "Juan",
        "contacto": "juan@parzibyte.me",
        "created_at": "2020-01-09 16:43:54",
        "updated_at": "2020-01-09 16:43:54"
    }
];

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:

data: () => ({
    docenteSeleccionado: {},//<-- el seleccionado estará aquí
    docentes: [], // <-- La lista de docentes
}),

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í:

<div class="col-6">
    <div class="form-group">
        <label for="docente">Docente</label>
        <select v-model="docenteSeleccionado" class="form-control" id="docente">
            <option v-for="docente in docentes" :value="docente">{{docente.nombre}}</option>
        </select>
    </div>
</div>
<div class="col-6">
    <h2>Docente seleccionado:</h2>
    {{docenteSeleccionado}}
</div>

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:

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

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