Переменная сообщения проверки Vuetify

Я хочу предложить свой сайт на двух разных языках. Я использую vuetify для проверки формы. Проблема в том, что я не знаю, как поместить "Rule-Text" в переменную. Все ли могут помочь.

У меня есть следующая установка:

<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',
],

Как я могу поместить две строки «Требуется идентификатор» и «Разрешены только буквы и цифры, без специальных символов» в переменные, чтобы, когда пользователь меняет язык, язык этих строк также менялся.

Большое спасибо!

христианин

javascript string vue.js vuetify.js translation

11.12.2020 12:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

405

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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/[email protected]/dist/vue.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@mdi/[email protected]/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>

11.12.2020 12:55

Другие вопросы по теме

Альтернативный метод поиска/замены (str_replace и gsub не работают)

Notepad++ Поиск строк длиной 50 символов и более между двумя вертикальными чертами

Почему функция strtok игнорирует два токена один за другим

Использовать переменные среды между строками?

Разница в наборе строк

Передача строковой переменной через функцию в python 3.7.6

PostgreSQL — Как объединить значения строк после условного

Является ли С++ std::string бинарно совместимым между различными компиляторами и стандартными библиотеками?

Если я в строке, но частично, это даже нормально, python

Преобразовать список python в массив bash

Переменная сообщения проверки Vuetify

Ответы 1

Другие вопросы по теме

Похожие вопросы