title: How to reference a parent prop value in a vue-i18n translation string?
body: <p>I am trying to make a vuetify text field reusable and would like to pass some prop data from a parent component into the validation translation strings as a variable. This prop is a max. character value for validation.</p>
  
  <p>Is it possible to insert a prop or data value into a translation string ? Something like ...</p>
  
  <pre><code>props: { 
    maxLength:  { type: Number, default: 20 },
  }
  
  i18n: {messages: {
            en: { name_length: "Max. {this.maxLength} characters" },...
  
  }
  </code></pre>
  
  <p>I've tried:</p>
  
  <pre><code>"Max." + String(this.maxLength) + characters", but it comes out as undefined.
  </code></pre>
  
  <p>Here's the complete code for reference:</p>
  
  <pre><code>&lt;template&gt;
               &lt;v-text-field  
  
                      v-model="text"      :prepend-icon="iconfront"
                      :rules="nameRules"  :name="name" 
                      :label="label"      :type="type"&gt;  
  
               &lt;/v-text-field&gt;
  
      &lt;/template&gt;
  
      &lt;script&gt;
  
           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) =&gt; !!v || this.$i18n.t("name_rule"),
                          (v) =&gt; v &amp;&amp; v.length &lt;= 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
           }
  
  
      &lt;/script&gt;
  </code></pre>