search

vue-generators / vue-form-generator

:clipboard: A schema-based form generator component for Vue.js
MIT License
2.99k stars 531 forks source link

Inject I18N #352

Open andrelec1 opened 6 years ago

andrelec1 commented 6 years ago

I have a api that return a array for generate my form ... Exemple : 

[
    {
        "label": "form.login",
        "placeholder": "form.login",
        "model": "login",
        "readonly": false,
        "required": true,
        "disabled": false,
        "featured": "",
        "hint": "",
        "min": "",
        "maxlength": null,
        "default": "",
        "type": "input",
        "inputType": "text"
    },
    {
        "label": "form.password",
        "placeholder": "form.password",
        "model": "password",
        "readonly": false,
        "required": true,
        "disabled": false,
        "featured": "",
        "hint": "",
        "min": "",
        "maxlength": null,
        "default": "",
        "type": "input",
        "inputType": "password"
    },
    {
        "label": "form.remember_me",
        "placeholder": "",
        "model": "rememberMe",
        "readonly": false,
        "required": true,
        "disabled": false,
        "featured": "",
        "hint": "",
        "min": "",
        "maxlength": null,
        "default": "",
        "type": "input",
        "inputType": "checkbox"
    }
]

At this point i do a simple this.schema.fields = res.data; ... But in this json i don't have the translation i juste have a "translation key"

So, for the moment i think i need a mixin function for parse all my json and replace translate key befors sending to the form_generator ...

But i think is usefull if i can inject I18n directly in the generator ...

lionel-bijaoui commented 6 years ago

You should parse the array and replace the translation before sending it to VFG

const myArray = [...] // The original array
myArray.map(item => {
    item.label = this.$t(item.label); // example with https://github.com/kazupon/vue-i18n
})
andrelec1 commented 6 years ago

Yes i use this mixin 

translateForm(form) {
            form.forEach((data) => {
                // todo add property needed translation
                data.label = this.$t(data.label);
                data.placeholder = this.$t(data.placeholder);
            });

            return form;
        },

for the moment i don't know all key need to be stranslate ...

So i think would be usefull if i can "declare/inject" callback that would be executed on all visible/accessible key ( like value, placeholder, alt .... )