VUEJS - Best way to get this "filled in" form to v-model?

Question

I have a form, here's a photo for context:

Link: https://i.imgur.com/chQzD1U.png

I'm looping through the items in the module to generate textfields like below...

                <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>

Here is the basic structure of "module":

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"

Now, a user fills in this form and when we load the form we get the following 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"
  }
}

What would be the best approach to v-model each entry to the v-textfield?

• I've made the keys the same ID as the parent_id and tried to v-model like ... planning[planning. performance_management_set_module_planning_id].text
  but vue does not like me including variables in v-models.

• I've also tried to bind a :value to a function like so:

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;
                    }
            },

but this is not reactive.

Am I missing a very simple approach here?

Answer 1

Does using indexes work for you?

<v-row class="d-block d-md-flex">
    <v-col v-for="(planning, index) in module.plannings" :key="planning.id">
        <v-textarea 
           outlined hide-details dense
           :label="planning.name"
           @input='(evt) => { updateItem(index, evt.target.value) }' 
           :value="planning.text"></v-textarea>
    </v-col>
</v-row>
//
...
methods: {
    updateItem(index, value) { this.module.plannings[index].text = value; }
}