My form component is used for client registration and editing purposes. Upon creation of the form component, I check if there is an ID in the URL to determine which type of form to display. If no ID is present (indicating a new client registration), all fields should be empty. If an ID is found in the URL, I make an Axios request to load the client information, store it in Vuex, and display the data in the fields for modification.
<Form enctype="multipart/form-data" @submit="$emit('submit')">
<validation-provider
name="Company name"
>
<v-text-field
v-model="details.company_name"
label="Company name"
/>
<span class="text-sm text-red-500">{{ errors[0] }}</span>
</validation-provider>
<validation-provider
name="Company email"
>
<v-text-field
v-model="details.email"
label="Company email"
/>
<span class="text-sm text-red-500">{{ errors[1] }}</span>
</validation-provider>
<validation-provider
name="Company phone"
>
<v-text-field
v-model="details.phone"
label="Company phone"
/>
<span class="text-sm text-red-500">{{ errors[2] }}</span>
</validation-provider>
...
Next, I define the data properties:
data: function () {
return {
details: {
type: Object,
default: () => ({})
},
In the create method, I use
await this.$store.dispatch("clients/getClientById", { id: id})The issue I'm encountering is that after retrieving the client via computed, I am unsure how to bind them with v-model to send them using FormData or edit them. Can someone please provide guidance?
I tried the following approach but encountered an error stating
Error: [vuex] do not mutate vuex store state outside mutation handlers async getClientById(id){
await this.$store.dispatch("clients/getClientById", {
id: id})
.then(res => {
if (res.status === 200 ){
let clientData = res.data.data
this.details = clientData
this.status = clientData.status
}
})