Need some help with a form and looping through items in a module to generate textfields. Take a look at the photo for context:
Link: https://i.sstatic.net/MPAVq.jpg
Currently, I'm using a structure like this...
<v-row class="d-block d-md-flex">
<v-col v-for="planning in module.plannings" :key="planning.id">
<v-textarea
outlined
hide-details
dense
:label="planning.name"
></v-textarea>
</v-col>
</v-row>
This is how the "module" structure looks like:
created_at:"2022-01-31T15:56:06.000000Z"
deleted_at:null
.....
plannings:[
{
"id": 76,
"performance_management_set_module_id": 103,
"name": "Performance Criteria",
"ord": 1,
"updated_at": "2022-01-31T15:56:11.000000Z",
"created_at": "2022-01-27T11:18:46.000000Z"
},
{
"id": 77,
"performance_management_set_module_id": 103,
"name": "Evidence Collection",
"ord": 2,
"updated_at": "2022-01-27T11:18:51.000000Z",
"created_at": "2022-01-27T11:18:51.000000Z"
},
{
"id": 78,
"performance_management_set_module_id": 103,
"name": "Support & Training",
"ord": 3,
"updated_at": "2022-01-27T11:19:01.000000Z",
"created_at": "2022-01-27T11:19:01.000000Z"
}
]
....
updated_at:"2022-01-31T15:56:06.000000Z"
When users fill out the form, we retrieve data from the backend:
{
"76": {
"id": 1,
"performance_management_set_module_planning_id": 76,
"user_id": 2,
"text": "this is a test 1",
"created_at": "2022-01-31T15:25:31.000000Z",
"updated_at": "2022-01-31T15:25:31.000000Z"
},
"77": {
"id": 2,
"performance_management_set_module_planning_id": 77,
"user_id": 2,
"text": "this is a test 2",
"created_at": "2022-01-31T15:25:31.000000Z",
"updated_at": "2022-01-31T15:25:31.000000Z"
}
}
Looking for advice on the best way to v-model each entry to the v-textfield:
Tried using keys as parent IDs for v-model but faced issues...
Also experimented with binding :value to a function:
bindToItem(id){
if(this.plannings){
if(this.plannings.find(i => i.performance_management_set_module_planning_id === id)) {
return this.plannings.find(i => i.performance_management_set_module_planning_id === id).text;
}
},
Any simpler approach that I might be missing?