это моя форма:
<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: {
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: ''
}
]
}
как видите, я м работает v-for l oop на пассажирском массиве. все работает нормально, пока данные не извлекаются с сервера, и я хочу редактировать форму. когда я редактирую поля, я получаю это сообщение об ошибке:
[vuex] не изменяет состояние хранилища vuex вне обработчиков мутации.
я получаю данные в компоненте моей страницы :
страниц / пригласительное письмо / _id. vue
async fetch({ params, store }) {
const PARAM = params.id
if (PARAM) {
await store.dispatch('invitationLetter/fetch', PARAM)
}
}
и я устанавливаю данные формы в форме компоненте:
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]]
})
}
}
, как я уже говорил до того, как заполнится поле формы, но когда я попытаюсь изменить одну из данных (изменить ввод), я получу сообщение об ошибке:
[vuex] не состояние хранилища mutate vuex вне обработчиков мутаций.
Это моя форма после данных, полученных с сервера:
