v-model a dynamically changing array

[jmacnc]

I am working on creating custom fields in my application. I am allowing clients to define custom fields for various objects (ie. Initiative) and displaying them when updating or creating that object.

In my state I define the object being modified or added:

(initiatives.js)

addEditInitiative: {
        name: '',
        description: '',
        product_name: '',
        product_id: '',
        quarter: '',
        year: '',
        custom_fields: []
    },

the custom_fields array is filled with the custom fields defined for initiatives. For example, in the json response from the database, the custom fields array will include something like this...

  "payload": [
    {
      "id": "5dc840c3d27a6e47b9baec33",
      "cid": "5d8502a2a284b46f3621f389",
      "name": "2",
      "description": "",
      "product_name": "Maps",
      "product_id": "5d86509ee24692444d84b155",
      "quarter": "Q2",
      "year": "2019",
      "custom_fields": [
        {
          "id": "5db8ec9fee8040e9b6dfad87",
          "cid": "5d8502a2a284b46f3621f389",
          "name": "Test",
          "type": "text",
          "form": "initiative",
          "value": ""
        },
        {
          "id": "5dba0bcedf9cbf185683ecca",
          "cid": "5d8502a2a284b46f3621f389",
          "name": "test2",
          "type": "text",
          "form": "initiative",
          "value": ""
        }
      ]
    }
  ]
}

I am trying to edit the value for each of those custom fields through vuex map fields. Currently, I am not mutating the state. I am directly using v-model on the state.

(Vue Component)

                    <v-item v-for="(field, index) in initiativeFields"
                            v-bind:index="index"
                            v-bind:key="field.id">
                        <v-text-field v-if="field.type = 'text'"
                                      :label="field.name"
                                      type="text"
                                      v-model="addEditInitiative.custom_fields[index].value">
                        </v-text-field>
                    </v-item>

I am not sure how to replace v-model="addEditInitiative.custom_fields[index].value" with something that will mutate the state. For Example, this is my current MapFields setup

(Vue Component)

...mapFields('initiative', [
                'addEditInitiative.name',
                'addEditInitiative.description',
                'addEditInitiative.product_name',
                'addEditInitiative.product_id',
                'addEditInitiative.quarter',
                'addEditInitiative.year',
            ]),

How can I update the array using this?

[geoidesic]

@jmacnc Have a look at issue #24. Specifically the solution: #24 (comment)

This allows you to use dynamic paths in your mapping, which sounds to me like what you're attempting to do.

[geoidesic]

Closing this as no further feedback from OP