es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo obtener múltiples opciones de una caja de selección múltiple en Vue?

25 Jul, 2023 Programación

Tengo muchas cajas de selección que tienen muchas opciones y son dinámicas.

<template>
  <div>
    <tr v-for="category in categories.items" :key="category.id">
      <td>
        <select v-model.trim="$v.form.attributeValues.$model" class="form-control">
          <option value=""></option>
          <option v-for="option in category.values" :key="option.id" :value="option">
            {{ option.content }}
          </option>
        </select>
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: null,
      form: {
        productId: this.product.productId,
        attributeValues: [],
      },
    }
  },
}
</script>

Quiero obtener los valores de los temas y guardarlos en un array. Pero no funciona y solo puedo guardar 1 opción.

como esto:
(solo obtengo una opción de cada caja de selección)
enter image description here

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener los valores de todas las cajas de selección y guardarlos en un array, necesitas utilizar un array en tus datos para almacenar los valores seleccionados. Puedes actualizar la propiedad data del formulario para tener un array de attributeValues en lugar de un valor único:

    data() {
  return {
    categories: null,
    form: {
      productId: this.product.productId,
      attributeValues: [], // Cambia esto a un array
    },
  }
},

    Luego, necesitas actualizar la vinculación v-model en las etiquetas select para que se vinculen a un índice específico en el array:

    <select v-model.trim="form.attributeValues[index]" class="form-control">

    Ten en cuenta que index debe ser el índice de la iteración actual en v-for.

    Finalmente, para obtener todos los valores seleccionados cuando el formulario se envía, simplemente puedes hacer referencia al array attributeValues en el objeto form.

    submitForm() {
  console.log(this.form.attributeValues);
  // Realiza aquí tu lógica de envío del formulario
}

    Esto te dará un array de todos los valores seleccionados de cada caja de selección.

Comments are closed.