how to pass args to the i18n messages

[henriquecustodia]

Versions:

• VueJs: 2.5.17
• Vee-Validate: 2.1.0-beta.9

Description:

Hey there, it's a question. I want to know how to pass args to the i18n messages, I don't found any example.

for better explanation, an example:

I have a validator min (minlength)

export default (value, [length]) => {
    length = Number(length);
    return value.length >= length;
}; 

And I've a validation message in i18n object

Digite no mínimo {length} caracteres

I want to use the length arg to generate the i18n message correctly. (To manage the i18n messages, I'm using the vue-i18n library.)

I saw in this line the I18nDictionary.getMessage pass a data param to Vuei18n.t, but I can't understand hot to use exactly (if it's possible)

Thank you!

[ssnetxyz]

I'm not related to this project, but here is how I did it. VueI18n does not accept functions, only strings. But you can use {0} for the first function argument and {1} for the second (and so on). So In my case:

const i18n = new VueI18n({ locale: 'ja', messages });
Vue.use(VeeValidate, { i18n });
VeeValidate.Validator.extend('is_japanese', {    
    validate: value => reAllKanji.test(value)
});

messages.js

export default {
  ja: {
    validation: {
      messages: {
        is_japanese: "{0}は日本人ではありません！",
        min: '{0}は{1}文字以上で入力してください',
      }
    }
  },
 en: { ... 

I do however believe you can use VeeValidate.Validator.localize() to convert your vee-validate message functions to strings...

So far I think vee-validate handles localization better than Vuei18n.

[henriquecustodia]

Thank you @ssnetxyz, using {1} I can use the param value in message.

Digite no mínimo {1} caracteres

• The {0} is field name
• The {1} is param values
• The {2} is data values

For advanced interpolation I think is necessary create a custom formatter, because I can't use named params in the message, but it is just curiosity haha

[logaretm]

@henriquecustodia As @ssnetxyz pointed out, vee-validate uses the list format for i18n messages due to the params being an array so it limits the formats we would be using.

In the future it is possible that vee-validate will switch to a more traditional message formats similar to i18n with backward compatibility of course. Also passing objects as params was recently implemented but not for locale message generators.

[HapLifeMan]

Hi @logaretm, is it planed to have more traditional messages formats? 😊

By the way, I found a bug when using the rule decimal: https://github.com/baianat/vee-validate/blob/482c643b99546173845c01d4b0af651ae494c050/locale/en.js#L14-L18

The condition below is not working because of "interpolation":

${!decimals || decimals === '*' ? '' : decimals}

Not able to set a condition on an argument value (using vee-validate 2.2.3).

[logaretm]

@HapLifeMan The issue is that most i18n implementations do not support conditionals in some capacity. So that means either we will split down rules to only have one message per reason (splitting rules like length into max_length, min_length and length). Or change the entire structure of the dictionary to include a "reason" which a message will be selected based upon.

It is planned to get fixed in v3 which will implement i18n integration as a separate package/plugin. But I still have not decided yet on how to fix it. It is reported here #1643

[HapLifeMan]

Thanks for your reply! Any scheduled date for the v3? 😊