[Vuejs]-Vuetify validation message variable

by

0👍

✅

You need to assign a variable for the text. And use the language according to your need. Here is my idea in the demo:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      title: '',
      email: '',
      languages: ['english', 'bangla'],
      language: 'english',
      rulesText: {
        bangla: {
          minLen: 'অন্তত ২০',
          required: 'প্রয়োজন'
        },
        english: {
          minLen: 'At least 20',
          required: 'Required'
        }
      },
      rules: {
        required: value => !!value || this.rulesText[this.language].required,
        counter: value => value.length >= 20 || this.rulesText[this.language].minLen,
      },
    }
  },
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.18/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.18/dist/vuetify.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="12" sm="6">
            <v-select :items="languages" v-model="language"></v-select>
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field v-model="title" :rules="[rules.required, rules.counter]" label="Title" counter maxlength="20"></v-text-field>
          </v-col>


        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

Leave a comment