首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在vue-i18n转换字符串中引用父prop值?

如何在vue-i18n转换字符串中引用父prop值?
EN

Stack Overflow用户
提问于 2018-07-24 01:37:29
回答 1查看 2.1K关注 0票数 1

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

是否可以将属性或数据值插入到转换字符串中?就像..。

代码语言:javascript
运行
复制
props: { 
  maxLength:  { type: Number, default: 20 },
}

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

}

我试过了:

代码语言:javascript
运行
复制
"Max." + String(this.maxLength) + characters", but it comes out as undefined.

下面是完整的代码以供参考:

代码语言:javascript
运行
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2018-07-26 17:14:15

好了,经过一番挖掘,我找到了答案:

代码语言:javascript
运行
复制
props: { 
  maxLength:  { type: Number, default: 20 },
}

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

}

然后在模板中,您可以将道具传递到翻译中:

代码语言:javascript
运行
复制
 $t("name_length", {max: this.maxLength})
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51484405

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档