Enlace de entrada de formulario Vue.js con la opción Seleccionar

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

El enlace de entrada de formulario con la opción Seleccionar se utiliza para manejar el enlace de valor para el elemento seleccionado. El elemento de selección usa el valor como accesorio y cambia como el evento para la directiva v-model , que admite el enlace de valor sin string . El valor inicial de la opción de selección se ignora y siempre trata el cambio actual como el valor. Podemos hacer que la opción de selección v-model guarde diferentes tipos de datos que no sean números tipo string.

Sintaxis : para seleccionar elementos, simplemente agregue la directiva v-model y manténgala única o múltiple de la siguiente manera:

<!-- Single -->
<select v-model="selected">
  <option value="Option 1">Option 1</option>
  ...
</select> 

<!-- Multiple -->
<select v-model="mselected" multiple>
  <option value="Option 1">Option 1</option>
  ...
</select>

<!-- Select Option -->
<select v-model="selected">
  <option :value="{ number:1 }">1</option>
  ...
</select>

Ejemplo: En el siguiente ejemplo, tenemos dos elementos de selección, uno simple y otro múltiple. La opción de selección única almacena un valor único del menú desplegable de selección y la opción de selección múltiple almacena una array de valores seleccionados.

Paso 1: Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Estructura del proyecto: después de una instalación exitosa, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 2: en el archivo App.vue, agregue los miembros de datos, la categoría y el idioma para el modificador v-model. Vue.js almacenará los valores de selección única y selección múltiple de las opciones en estos miembros de datos.

<script>
export default {
  data() {
    return {
      category: '',
      language: '',
    }
  },
}
</script>

Paso 3: en la sección de plantilla, agregue dos elementos de selección, uno con una sola opción de selección y el otro con múltiples opciones de selección.

<template>
  <center>
    <h1 style="text-align: center; 
        color: green">GeeksforGeeks</h1>
    <strong>
        Vue.js Form Input Binding with Select option
    </strong>
    <br />
  </center>
  <center>
    <div>
      Data Structure : {{ category }}
      <br />
      <select v-model="category">
        <option value="Array">Array</option>
        <option value="Queue">Queue</option>
        <option value="Priority Queue">Priority Queue</option>
        <option value="Linked List">Linked List</option>
      </select>
    </div>
    <br />
    <div>
      Programming Language : {{ language }}
      <br />
      <select v-model="language" multiple>
        <option value="Java">Java</option>
        <option value="C++">C++</option>
        <option value="Python">Python</option>
        <option value="Javascript">Javascript</option>
      </select>
    </div>
    <br />
    <div>
      Select the number:
      <select v-model="choose">
        <option :value="{ number: 987 }">987</option>
        <option :value="{ number: 258 }">258</option>
        <option :value="{ number: 456 }">456</option>
      </select>
    </div>
  </center>
</template>

Paso 4: Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Al compilar correctamente el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

Producción:

 

Referencia: https://vuejs.org/guide/essentials/forms.html#select-options