v-model an array using vue map state

Question

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',
            ]),

What's the error you're seeing? Also, providing a codepen or a jsfiddle would help — xlm
– xlm, Commented Nov 20, 2019 at 1:33
Try using multiple row fields. github.com/maoberlehner/vuex-map-fields#multi-row-fields — MJ55
– MJ55, Commented Nov 20, 2019 at 8:45
Multiple row fields helped! If you add this as an answer I can give you the 50 reputation I think. — jmacnc
– jmacnc, Commented Nov 21, 2019 at 3:46

MJ55 · Accepted Answer · 2019-11-22 08:51:31Z

2

+50

Try using multiple row fields.

https://github.com/maoberlehner/vuex-map-fields#multi-row-fields

answered Nov 22, 2019 at 8:51

MJ55

2812 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

W1NDHOND · Accepted Answer · 2019-11-20 10:53:06Z

0

v-model="test" is actually just a shorthand for :value="test" @input="test = arguments[0]" (or :value="test" @input="test = $event.target.value" for native components like input).

You can use this to your advantage to refactor your code a bit to something like this:

<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"
                  :value="addEditInitiative.custom_fields[index].value"
                  @input="updateValue($event, index)">
    </v-text-field>
</v-item>

And in your updateValue method you could update the store with an action/mutation.

answered Nov 20, 2019 at 10:53

W1NDHOND

386 bronze badges

2 Comments

jmacnc Over a year ago

My action is updateValue: function ({commit}, {value, index}) { commit('updateCustomField', value, index) }

jmacnc Over a year ago

Mutation is

updateCustomField(state, value, index) {             state.addEditInitiative.custom_fields[index].value = value         },

Collectives™ on Stack Overflow

v-model an array using vue map state

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related