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, or if that doesnt work, some other way that isn't causing the error I am getting now. 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. I have been using https://github.com/maoberlehner/vuex-map-fields for this for simple fields. For Example,
(Vue Component)
...mapFields('initiative', [
'addEditInitiative.name',
'addEditInitiative.description',
'addEditInitiative.product_name',
'addEditInitiative.product_id',
'addEditInitiative.quarter',
'addEditInitiative.year',
]),
Try using multiple row fields.
https://github.com/maoberlehner/vuex-map-fields#multi-row-fields