I am in the process of creating a dynamic form that needs to function properly. Within my array of competences, there is a skills array. Each skill within a competence needs to be evaluated, requiring a corresponding answer.
My setup involves a v-stepper with dynamic steps, and the form fields are being generated using v-for. Each skill requires a unique v-model to bind the data as competences can have multiple skills.
answers: [
skillId:
skillLevel:
feedback:
feedforward:
...
]
My concern is that with dynamically generated forms, how can I set the v-models for each field, considering a competence can have multiple skills that require individual models?
Below is a snippet of my code
<template>
<v-stepper v-model="e1" :appraisal="appraisal">
<v-stepper-header>
<template v-for="n in steps">
<v-stepper-step :key="`${n}-step`" :step="n" :complete="e1 > n" editable></v-stepper-step>
<v-divider v-if="n !== steps" :key="n"></v-divider>
</template>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content v-for="n in steps" :key="`${n}-content`" :step="n">
<v-row align="center" justify="center">
<v-col cols="4">
<v-subheader class="headline">{{appraisal.appraisalCompetences[n-1].competence.name}}</v-subheader>
</v-col>
</v-row>
... (truncated for brevity)
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</template>