0
254
ViewsCómo usar la entrada HTML, seleccionar, campo de casilla de verificación en el bucle Vue JS y obtener los datos como matriz
Tengo esto para lop en mi aplicación Vue JS:
<b-form> <table class="table"> <thead> <tr> <th>Import Field</th> <th>Project Field</th> <th>Select</th> </tr> </thead> <tbody> <tr v-for="(data, index) in projectFieldOptions" :key="index" > <td> <b-form-input class="basicInput" v-model="data.text" /> </td> <td> <b-form-select v-model=" selectedProjectOption " :options=" projectFieldOptions " /> </td> <td> <b-form-checkbox v-model="selectMap" checked="false" name="check-button" switch inline > </b-form-checkbox> </td> </tr> </tbody> </table> <b-button variant="primary" type="submit" @click.prevent="validateEditMapping" > Next </b-button> </b-form>Está mostrando esta salida:
Puedes ver que hay 3 campos:
- Importar campo (como cuadro de entrada)
- Campo de proyecto (como menú desplegable de selección)
- Seleccione (como casilla de verificación)
Ahora,
- ¿Cómo puedo obtener todos los campos de entrada, selección y casilla de verificación como matriz en Vue JS?
- Si cambio el menú desplegable del campo Proyecto, también se cambia otro menú desplegable, pero debería cambiar solo mi menú desplegable seleccionado. ¿Cómo puedo resolverlo?
Quiero que la salida sea así:
[ { item, imte, 0 }, { description, description, 1}, .... ] 
·
Santiago Trujillo
1 answers
Answer question0
Comenzaré con la respuesta a la segunda pregunta. Al igual que tiene data.text asignado a v-model en b-form-input , debe hacer algo similar para b-form-select y b-form-checkbox, por ejemplo
<b-form-select v-model="data.selectedProjectOption" :options="projectFieldOptions" />de lo contrario, tendrá la variable selectedProjectOption asignada a cada componente b-form-select , por lo que si cambia su valor en uno de ellos, también cambiará el valor en otros.
Para la primera pregunta, supongamos que sus projectFieldOptions se ven así:
projectFieldOptions = [ {text: 'text', selectedProjectOption: 'option', selectMap: 0, ...}, {text: 'text1', selectedProjectOption: 'option1', selectMap: 1, ...}, ..., ]puede mapear esta matriz para recibir la salida deseada.
const projectFieldOptions = [{ text: 'text', selectedProjectOption: 'option', selectMap: 0 }, { text: 'text1', selectedProjectOption: 'option1', selectMap: 1 }, ] const mappedArray = projectFieldOptions.map((e) => { return [e.text, e.selectedProjectOption, e.selectMap] }); console.log(mappedArray);
·
Santiago Trujillo
Report
Answer question