Form Structure:
<card-wrapper
v-for="(passenger, index) in form.passenger"
:key="index"
:icon="['fas', 'user']"
:title="`Passenger ${index + 1}`"
class="mb-5"
>
<validation-observer
:ref="`passengerForm${index + 1}`"
tag="div"
class="row"
>
<b-col cols="12" class="mb-3">
<b-row>
<b-col lg="4" cols="12">
<validation-provider
v-slot="{ errors }"
rules="required"
name="First name"
tag="div"
>
<form-text
id="first-name"
v-model="passenger.first_name"
:icon="['fas', 'user']"
:errors="errors[0]"
placeholder="First name"
tabindex="0"
class="mb-4"
/>
</validation-provider>
</b-col>
<b-col lg="4" cols="12">
<validation-provider
v-slot="{ errors }"
rules="required"
name="Last name"
tag="div"
>
<form-text
id="last-name"
v-model="passenger.last_name"
:icon="['fas', 'user']"
:errors="errors[0]"
placeholder="Last name"
tabindex="0"
class="mb-4"
/>
</validation-provider>
</b-col>
....
Form Data:
form: {
type: 'InvitationLetter',
status: 'real',
code: '',
price: 18,
gender: '',
firstName: '',
lastName: '',
email: '',
phone: '',
destination1: '',
destination2: '',
social_media: [],
options: [],
passenger: [
{
gender: '',
first_name: '',
last_name: '',
nationality: '',
birth_date: '',
passport_expiry_date: '',
passport_number: '',
travel_insurance: ''
}
]
}
The form functionality works fine until editing the data fetched from the server triggers the following error message:
[vuex] do not mutate vuex store state outside mutation handlers.
The page component fetches data like this:
pages/invitation-letter/_id.vue
async fetch({ params, store }) {
const PARAM = params.id
if (PARAM) {
await store.dispatch('invitationLetter/fetch', PARAM)
}
}
The form data is set in the form component as demonstrated below:
computed: {
...mapGetters({
result: 'invitationLetter/getData'
}),
created() {
Object.keys(this.result).length !== 0 && this.setFormData()
},
methods: {
setFormData() {
this.count = this.result.passenger.length
const NAME = this.result.name.split('-')
const KEYS = Object.keys(this.form)
KEYS.forEach((item) => {
if (item !== 'firstName' && item !== 'lastName') {
this.form[item] = this.result[item] ? this.result[item] : ''
}
;[this.form.firstName, this.form.lastName] = [NAME[0], NAME[1]]
})
}
}
While the form fields are populated correctly after fetching data from the server, any attempt to modify the data results in the same error message being displayed:
[vuex] do not mutate vuex store state outside mutation handlers.
This is how the form looks after fetching data from the server: