Vuetify 验证消息变量

Question

我想以两种不同的语言提供我的网站。我使用 vuetify 进行表单验证。问题是，我不知道如何将“规则文本”放入变量中。大家可以帮忙吗

我有以下设置：

<v-form ref="form" v-model="valid" lazy-validation @submit.prevent="submit">
   <v-text-field class="mt-5"
     v-model="id"
     color= "orange"
     label="Enter ID"
     :rules="IdRule"
     counter
     maxlength="30"
     required
     clearable
     outlined
     v-on:keyup.enter="comp"
   ></v-text-field>
</v-form>

...
    
IdRule: [
  v => !!v || 'ID is required',
  v => /^[a-zA-Z0-9\s]*$/.test(v) || 'Only letters and numbers allowed, no special characters',
],

如何将 'ID is required' 和 'Only letters and numbers allowed, no special characters' 这两个字符串放入变量中，这样当用户更改语言时，这些字符串的语言也会更改。

非常感谢！

基督教徒

Answer 1

您需要为文本分配一个变量。并根据您的需要使用语言。这是我在演示中的想法：

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>

Vuetify 验证消息变量

Vuetify validation message variable

javascript

string

vue.js

vuetify.js

translation