Locales.vue

Locales.vue

<template>
    <div v-show="showComponent" class="form-group__bordered">
        <h4 class="text-center" v-if="groupName.length > 0">
            {{ groupName }}
        </h4>
        <div class="form-group"
             v-for="locale in localesAll"
             :key="locale.id">
            <label :for="`localized-value-${locale.abbr}`">
                {{ $t('translation.valueForLocale') }} {{ locale.abbr.toUpperCase() }}
            </label>
            <input :id="`localized-value-${locale.abbr}`"
                   type="text"
                   class="form-control"
                   :name="`localized-value-${locale.abbr}`"
                   v-validate="'required|max:255'"
                   v-model="values[locale.id]"
                   @change="updateValues"
                   required
            />
            <small class="invalid-feedback">
                {{ errors.first('attributesForm.attribute-type') }}
            </small>
        </div>
    </div>
</template>

<script>
import localesMixin from '../../mixins/locales';

export default {
    mixins: [localesMixin],
    props: {
        groupName: {
            type: String,
            default: '',
        },
        value: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            values: {},
            showComponent: false,
        };
    },
    watch: {
        value() {
            this.values = JSON.parse(JSON.stringify(this.value));
        },
    },
    async mounted() {
        this.showComponent = true;
        this.values = JSON.parse(JSON.stringify(this.value));
    },
    methods: {
        updateValues() {
            this.$emit('input', this.values);
        },
    },
};
</script>