Within my Vue/Nuxt project, I have implemented a form where users can add and update dynamic fields for calculating price offers. Upon loading the form, one field is created using the beforeMount lifecycle, with the option for users to add more fields as needed.
My data return includes:
data() {
return {
calculationFields: { qty: 0, price: 3.86, selected: false }
}
}
When the user clicks the "Add field" button, the addField method is triggered:
addField() {
this.$store.dispatch('quantity/updateAdd', this.calculationFields)
},
The 'updateAdd' action calls the UPDATE_ADD_ITEM mutation:
UPDATE_ADD_ITEM(state, value) {
state.options.push(value)
},
The template loops through the options array to display the specified 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)">×</a>
</div>
However, I am facing an issue with implementing v-model on dynamically created input fields to update the 'qty' value in the options state object. I need to be able to update the quantity values for each corresponding field in the array.
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 }
]
For instance, if a user inputs a quantity of 200 for the second field, the updated array should 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 need to utilize 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 I am unsure about how to efficiently find the index of the field and update the corresponding value within the array. While in a non-dynamic input scenario, I typically use:
v-model="updateFieldOne"
updateFieldOne: {
set(value) {
this.$store.dispatch('fields/updatePartDimeWidth', value)
}
}
Any guidance on the best approach to achieve this would be greatly appreciated.