0
311
Vistas¿Cómo obtener opciones múltiples desde el cuadro de selección múltiple en vue?
Tengo muchos cuadros de selección que tienen muchas opciones y son dinámicos.
<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 del tema y guardarlo en una matriz.
Pero no funciona y solo puedo guardar 1 opción.
así: (obtenga solo una opción de cada cuadro de selección) 
2 Respuestas
Responde la pregunta0
Una selección múltiple está lejos de ser un componente trivial.
La mayoría de la gente simplemente usa vue-multiselect o cualquier paquete similar .
También hay una tonelada disponible solamente. Debe buscar el que coincida con sus características deseadas.
Si desea implementarlo manualmente, deberá lidiar con vincular las entradas, los eventos y la estructura adecuados, ya que no se puede lograr con un v-model simple.
Uno de los mejores artículos sobre esto es este .
Aún así, todo depende de cómo quieras que se vea, el comportamiento de las distintas opciones, la forma de seleccionarlo (teclado, ctrl + clic, clic simple, etc.), las transiciones, etc.
TLDR: use un paquete o pruébelo usted mismo y muéstrenos lo que logró hasta ahora si desea depurar un poco.
La comunidad no escribirá un componente complejo desde cero para ti.
0
Simplemente coloque un v-model y un input-event a su opción de esta manera:
modelo
<option v-model="selectedItem" @input="checkItem(selectedItem)"> <!-- Your code --> </option> Vaya a su script y defina todo. Después de eso, puede crear un método llamado checkItem y allí push todo en una array definida que haya seleccionado.
texto
data() { return { selectedItem: null, allItems: [], } }, methods: { checkItem(selectedItem) { this.allItems.push(selectedItem) } }Espero que esto te ayude - ¡por favor házmelo saber!