1

我正在尝试使 vuetify 文本字段可重用，并希望将一些道具数据从父组件传递到验证翻译字符串作为变量。这个道具是最大值。用于验证的字符值。

是否可以在翻译字符串中插入道具或数据值？就像是 ...

props: { 
  maxLength:  { type: Number, default: 20 },
}

i18n: {messages: {
          en: { name_length: "Max. {this.maxLength} characters" },...

}

我试过了：

"Max." + String(this.maxLength) + characters", but it comes out as undefined.

以下是完整的代码供参考：

<template>
             <v-text-field  

                    v-model="text"      :prepend-icon="iconfront"
                    :rules="nameRules"  :name="name" 
                    :label="label"      :type="type">  

             </v-text-field>

    </template>

    <script>

         export default {

                props: {
                    value: {type: String},
                    iconfront:  { type: String },
                    name:       { type: String },
                    label:      { type: String },
                    type:       { type: String, default: 'text' },
                    minLength:  { type: Number, default: 1 },
                    maxLength:  { type: Number, default: 20 },
                },
                computed: {
                    text: { get() { return this.value },     
                            set(val) { this.$emit('input', val) }
                    }
                },
                data () {
                    return {
                        nameRules: [

                        (v) => !!v || this.$i18n.t("name_rule"),
                        (v) => v && v.length <= this.maxLength || this.$i18n.t("name_length")

                        ]
                    }
                },
                methods: {
                    onInput(input){
                         this.$emit('textFieldInput', input)
                    }
                },
                i18n: {
                    messages: {
                        en: {   
                                name_rule: "required field",
                                **name_length: "Max. {this.maxLength} characters",**
                                confirmation_rule: "passwords must match",
                                email_rule: "email must be valid",
                                password_length: "Length must be" + String(this.minLength)+ "-" + String(this.minLength) + "characters",
                        },
                        de: {  
                                name_rule: "Pflichtfeld",
                                name_length: "Max. 20 Zeichen",
                                confirmation_rule: "Passwörter müssen übereinstimmen",
                                email_rule: "Email muss gültig sein",
                                password_length: "Länge: 6-20 Zeichen",
                        },
                        fr: {   
                                name_rule: "champs requis",
                                name_length: "20 caractères maximum",
                                confirmation_rule: "les mots de passe doivent correspondre",
                                email_rule: "email doit être valide",
                                password_length: "longueur requise: 6 à 20 caractères",

                        },
            }
                },     //end of translations
         }


    </script>
4

1 回答 1

2

好的，经过一番挖掘找到了答案：

props: { 
  maxLength:  { type: Number, default: 20 },
}

i18n: {messages: {
          en: { name_length: "Max. {max} characters" },...

}

然后在模板中，您可以将道具传递给翻译：

 $t("name_length", {max: this.maxLength})
于 2018-07-26T09:14:14.930 回答