Within my Vue.js application, I have implemented a component called
commonform.vue
This form includes a dropdown menu for users to select a schedule type.
Depending on the selected schedule type, the remaining form fields should adjust accordingly.
While there are three common fields for all types:
user name, schedule name, and schedule typecommonform.vue. However, the other fields will dynamically change based on the user's selection...
To streamline this process and avoid excessive if-else logic in commonform.vue,
I have created distinct Vue components for each scenario such as:
typeonefields.vue and typetwofields.vue... etc
My query is,
How can I load these components dynamically inside fullform.vue depending on the chosen schedule type?
The schedule type selection code snippet is shown below:
<cs-dashboard-select
:options="[
{ value: '1', label: 'Type common'},
{ value: '2', label: 'Type one'},
{ value: '3', label: 'Type two'},
{ value: '4', label: 'Type three'},
]"
name="schedule_type"
> Select type
</cs-dashboard-select>
If the user opts for Type one, then the form fields should include:
user name, schedule name, schedule type, type one field
Similarly, for Type two, it should display:
user name, schedule name, schedule type, type two field