The issue seems to be with the v-model binding on the Field component. Since v-model is a shorthand for :value and @input bindings, it expects the formDescription object to have a property with the same name as the name attribute of the Field component. In this case, the name attribute is hardcoded as "description", so the v-model binding will always update the formDescription.description property, regardless of the current locale.
To make the v-model binding dynamic based on the current locale, you can use computed properties to generate the name and v-model bindings for each Field component. Here's an example:
<template>
<div v-for="locale in locales" :key="locale.id">
<div>
<label class="col-form-label" :for="`description_${locale}`">Description <span>{{ locale }}</span></label>
</div>
<div>
<Field
:name="`description_${locale}`"
as="textarea"
rows="8"
class="form-control editable_field"
:value="formDescription[locale]"
@input="value => formDescription[locale] = value"
/>
<ErrorMessage :name="`description_${locale}`" as="p" class="validation_error" />
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { Field, ErrorMessage } from 'vee-validate'
export default defineComponent({
components: { Field, ErrorMessage },
data() {
return {
locales: [], // populate this from server-side data
formDescription: {}, // initialize with empty object
}
},
computed: {
fieldNames() {
// generate dynamic field names based on locales
return this.locales.reduce((names, locale) => {
names[`description_${locale}`] = { type: String }
return names
}, {})
},
fieldValues() {
// generate dynamic v-model bindings based on locales
return this.locales.reduce((values, locale) => {
values[locale] = {
get: () => this.formDescription[locale],
set: value => (this.formDescription[locale] = value),
}
return values
}, {})
},
},
created() {
// initialize formDescription with dynamic field names
this.formDescription = this.$validator.defineValidationSchema(this.fieldNames)
},
})
</script>
In this example, we use two computed properties to generate the dynamic field names and v-model bindings based on the locales array. The fieldNames computed property generates an object with keys like "description_en", "description_fr", etc., and values that define the data type of each field (in this case, all fields are strings). We pass this object to the defineValidationSchema method of the $validator instance (which is provided by the vee-validate plugin) to initialize the formDescription object.
The fieldValues computed property generates an object with keys like "en", "fr", etc., and values that are getter/setter functions that read/write the corresponding property of the formDescription object. We use these functions as the value and @input bindings of the Field component, instead of the formDescription object directly.
With these changes, the v-model binding should update the correct property of the formDescription object based on the current locale.