Obtenga el valor seleccionado de un menú desplegable en Ver

Nos centraremos en cómo conectar Vue a un menú desplegable y obtener el valor que se seleccionó del menú desplegable.

Para comenzar, en la plantilla de Vue, creemos un formulario que contenga un menú desplegable para descubrir el club de fútbol que apoya un usuario:

<template>
  <div class="form-control">
    <label for="club">Which football club do you support?</label>
    <select name="club" id="club">
      <option value="acmilan">AC Milan</option>
      <option value="liverpool">Liverpool</option>
      <option value="arsenal">Arsenal</option>
      <option value="chelsea">Chlesea</option>
      <option value="barcelona">Barcelona</option>
      <option value="realmadrid">Real Madrid</option>
    </select>
  </div>
</template>

Para obtener el valor seleccionado de un menú desplegable en Vue, aprovecharemos el uso de la v-model, que permite un enlace bidireccional. Con el enlace bidireccional, no solo podemos escuchar el valor que un usuario selecciona de la lista desplegable, sino que también podemos anular un valor que el usuario seleccionó previamente.

En su proyecto Vue, comience agregando algunas propiedades de datos en el objeto de configuración del componente.
Dado que el valor del menú desplegable es una secuencia, asegúrese de inicializarlo en una cadena vacía como valor inicial. Ahora podemos vincular el menú desplegable a los datos:

data() {
  return {
    club: "",
  };
},

es con esto club propiedad de datos que vinculamos actualizaciones al menú desplegable de selección. Para que nuestros datos puedan detectar cualquier elección realizada por un usuario en el menú desplegable y actualizar automáticamente el valor del menú desplegable usando v-model.

Luego agregamos un v-model al menú desplegable, con un valor igual a la propiedad de datos que configuramos originalmente: club. Con esto en su lugar, los diversos valores establecidos en las opciones desplegables se almacenarían en clubcada vez que un usuario selecciona una opción diferente del menú desplegable:

<template>
  <div class="form-control">
    <label for="club">Which football club do you support?</label>
    <select name="club" id="club" v-model="club">
      <option value="acmilan">AC Milan</option>
      <option value="liverpool">Liverpool</option>
      <option value="arsenal">Arsenal</option>
      <option value="chelsea">Chlesea</option>
      <option value="barcelona">Barcelona</option>
      <option value="realmadrid">Real Madrid</option>
    </select>
  </div>
</template>

Dado que estamos tratando con una lista desplegable, a menudo no es ideal comenzar con un valor vacío para la propiedad de datos que se vincula con el menú desplegable. En este caso, podemos comenzar con una opción predeterminada, y para hacer esto, podemos echar un vistazo a los valores que se almacenan detrás de escena e instanciar el club propiedad a cualquier valor de opción de su elección:

data() {
  return {
    club: "aresnal",
  };
},

Ahora verá que "arsenal" está inicialmente preseleccionado en el menú desplegable, cuando la página se representa en su pantalla.

Usemos la interpolación de cadenas para hacer el club a los departamentos de ultramar:

<template>
  <!--string interpolation to render the club to the DOM -->
  <h3>{{ club }}</h3>
  <div class="form-control">
    <label for="club">Which football club do you support?</label>
    <select name="club" id="club" v-model="club">
      <option value="acmilan">AC Milan</option>
      <option value="liverpool">Liverpool</option>
      <option value="arsenal">Arsenal</option>
      <option value="chelsea">Chlesea</option>
      <option value="barcelona">Barcelona</option>
      <option value="realmadrid">Real Madrid</option>
    </select>
  </div>
</template>

Verá que cambia cada vez que un usuario selecciona una opción desplegable diferente.

Así de fácil es obtener el valor seleccionado de un menú desplegable en Ver.

Si quieres conocer otros artículos parecidos a Obtenga el valor seleccionado de un menú desplegable en Ver puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas