hola trato de generar un arbol de decision cuando el usuario elige una opcion de motivo que genera los motivos y creamos un select, si hace click en una opcion y la API no devuelve un array vacio otro select debajo con sub-razones lo cual se crea todo esto se crea dinámicamente de acuerdo con la respuesta de la API siempre que no devuelva una matriz vacía, etc.
<template> // the first select option don't generate <select v-model="reasonOne" @change="eventOne(reasonOne)"> <option v-for="(reason, key) in reasonsOne" :key="key" :value="reason.value" :selected="reason.item === reasonOne" @click="eventOne(reason.item)" > {{ reason.item }} </option> </select> // the div with generate dynamically all select option <div v-if="showSav"> <div id="select-pattern" class="step-two__select-wrapper" /> </div> <template/> <script> async eventOne(option) { let reasonsReturn = await customerApi.getReturnPattern( app, this.detailReturn.sku.product.id ); if (!this.reasonsReturn.length) { this.showSav = false; } let selectPattern = document.createElement('select'); let target = document.getElementById('select-pattern'); selectPattern.className = 'select-create'; selectPattern.id = 'create-input'; target.appendChild(selectPattern); for (let item of reasonsReturn) { let optionPattern = document.createElement('option'); optionPattern.value = item.id; optionPattern.text = item.name; selectPattern.appendChild(optionPattern); } document .getElementById('create-input') .addEventListener('change', async function () { let reasonData = await customerApi.getReturnPattern( app, this.value ); }); } </script>Pude crear la primera selección con él, pero el resto estoy atascado. Creo que tenemos que hacer un bucle en la selección que se creará si la API devuelve datos. no sé cómo hacerlo mientras llamo a la API cada vez que cambia la opción
Para crear algo dinámicamente, la forma más fácil es usar un v-for . No pude reproducir su código, pero puedo mostrarle cómo se ve la estructura:
MODELO:
Simplemente use un v-for y realice un bucle sobre él para cada input que creará (aquí se crea después de hacer clic en un botón)
<div v-for="item in inputs" :key="item.id"> <!-- HERE YOU CAN PUT YOUR SELECTION --> </div> <b-button @click="addNewInput()">Add new Input</b-button>GUION:
Dos cosas que hacer en su guión. Primero: defina sus datos y cree la primera input y luego agregue un método para su click-event y push una entrada cada vez que haga clic en el botón.
data() { return { id: 1, //following is your first input inputs: [{ id: this.id += 1, //count 1 for every input -> ID IS UNIQUE }] } }, methods: { addNewInput() { this.inputs.push({ id: this.id += 1 }) } } Esa es la estructura que puede hacer con un click-event o con un for-loop dentro de sus métodos, ¡pero la estructura permanece siempre igual!
¡Espero que esto te ayude!