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.