I need to dynamically display form elements retrieved from my database.
{
"name": "Checkbox",
"order": 1,
"type": "checkbox"
},
{
"name": "Dropdown",
"order": 2,
"type": "dropdown"
},
{
"name": "Radio Buttons",
"order": 3,
"type": "radio"
}
Here's my approach to generating the elements while maintaining their order:
<template v-for="question in questions">
<div v-if="question.type == 'checkbox'">
<el-checkbox></el-checkbox>
</div>
<div v-if="question.type == 'dropdown'">
<el-dropdown></el-dropdown>
</div>
</template>
This method works well and keeps the order intact.
However, I have some complex elements that I don't want to duplicate using v-for. Instead, I want the inner elements to be duplicated.
For instance:
<el-form-item class="u-m-b-0" v-if="question.type == 'radio'">
<div class="radio-input__container">
<input type="radio" name="option" value="First Option"></input>
<input type="radio" name="option" value="Second Option"></input>
<input type="radio" name="option" value="Third Option"></input>
</div>
<div class="radio-inputs">
<el-radio></el-radio>
</div>
</el-form-item>
The current implementation duplicates everything, which is not desired.
An ideal solution would look like this:
<el-form-item class="u-m-b-0" v-if="question.type == 'radio'">
<div class="radio-input__container">
<div class="radio-input__label">Option A</div>
<div class="radio-input__label">Option B</div>
<div class="radio-input__label">Option C</div>
</div>
<div class="radio-inputs">
<el-radio v-for="question in questions.questions"
v-if="question.type == 'radio'"
:key="question.id" v-model="answers[question.id]"
class="radio-input__item">
</el-radio>
</div>
</el-form-item>
Unfortunately, this approach doesn't work as expected. Removing the template loop for individual elements would disrupt the order. Any suggestions on how to solve this?
Any ideas or solutions are greatly appreciated.