Greetings! I am working on designing a decision tree that dynamically generates options based on user selections and API responses. When a user chooses a reason option, the corresponding reasons are fetched from the API and displayed in a select dropdown. If the user selects an option that returns additional data from the API, another select dropdown is created below it with sub-reasons. This dynamic creation of select dropdowns continues as long as the API response is not empty.
<template>
// The first select option does not 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 will dynamically generate all select options
<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>
While I have successfully implemented the initial select dropdown, I am facing difficulties in creating subsequent ones. I believe I need to implement a loop to handle the creation of select dropdowns based on API responses when each option is selected, but I am unsure about how to achieve this while making API calls every time an option is changed.