Update value in dynamic object in vuex store in Nuxt

Question

In my Vue/Nuxt project I have a form where the user can add update dynamic fields to be used in a price offer calculation.

When the form loads there will be created one field with the beforeMount lifecycle, and the user can then choose to create one or more extra fields.

in my data return I have this:

data() {
 return {
      calculationFields: { qty: 0, price: 3.86, selected: false },    
     }
 }

And when the user click the "Add field" button the addField method is called:

addField() {
      this.$store.dispatch('quantity/updateAdd', this.calculationFields)
    },

where the updateAdd actions calls the UPDATE_ADD_ITEM mutation

UPDATE_ADD_ITEM(state, value) {
    state.options.push(value)
  },

value is { qty: 0, price: 3.86, selected: false }

this works fine as the options array is updated with the new field object

In the template I loop on this array to output X number of fields

<div v-for="(field, index) in getCalculationFields()" :key="field" class="flex-xs justify-between calculation-field">
        <InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />

        <a href="#" class="remove-field" @click.prevent="removeField(index)">&times;</a>
      </div>

My problem now is, that I can't figure out how I can use v-model on each dynamically created input fields so that I can update the qty value in the field object in the options state.

So if the list contains three fields like:

[
{ qty: 0, price: 3.86, selected: false }, 
{ qty: 0, price: 3.86, selected: false }, 
{ qty: 0, price: 3.86, selected: false }
]

So when the use in field number 2 input 200 as quantity the array will look like this:

[
    { qty: 0, price: 3.86, selected: false }, 
    { qty: 200, price: 3.86, selected: false }, 
    { qty: 0, price: 3.86, selected: false }
]

I believe I have to use something like

<InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" v-model="updateOptionList" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />

But what is the best what to find the index of the field and update the value in that index on the array.

In a non-dynamic input I use something like this:

v-model="updateFieldOne"
updateFieldOne: {
    set(value) {
            this.$store.dispatch('fields/updatePartDimeWidth', value)
          }
}

which works as intended.

Answer 1

You can give index props, and use it in mutation. EDIT_ITEM mutation help for edit item if you want add new elemenet use state.options.push(value).

this.$store.dispatch('fields/updatePartDimeWidth', {value ,index})

EDIT_ITEM(state, {value ,index }) {
    state.options[i] = value
  },