Как использовать перевод Vue i18n в файле .js?

Я работаю над VueCLI. Я создал файл .js, содержащий правила для ввода:

import Vue from 'vue'

export const $t = (sign) => Vue.prototype.$t(sign)

function checkMail(email) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ // eslint-disable-line no-eval
  return re.test(String(email).toLowerCase())
}

const rules = {
  gdprRequired: (v) => !!v || $t('registerPage.gdprNotChecked'),
  emailRules: [(v) => checkMail(v) || $t('registerPage.wrongMail')],
}

export default rules

Я хочу объявить правила во внешнем файле js, а затем импортировать его в другие файлы vue. Когда я выполняю это правило, проверяйте значение правильно, но оно не показывает переведенное сообщение об ошибке. Я попробовал export const $t = (sign) => Vue.prototype.$t(sign), bcs аналогичный код работал для nuxt, но здесь, в VueCLI, я получил ошибку:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "ReferenceError: $t is not defined"

found in

---> <VTextField>
       <VForm>
         <Register>
           <VMain>
             <VApp>
               <Session> at src/layouts/Session/Session.vue
                 <App> at src/App.vue
                   <Root>

и это:

vue.runtime.esm.js?2b0e:1888 ReferenceError: $t is not defined
    at rules.emailRules (rules.js?d86d:21)
    at VueComponent.validate (index.ts?91bf:254)
    at VueComponent.beforeMount (index.ts?91bf:217)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at mountComponent (vue.runtime.esm.js?2b0e:4043)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm (vue.runtime.esm.js?2b0e:5925)

Здесь импорт кода в «register.vue»:

import rulesConstant from "@/constants/rules";

Вычисление экспортированных правил в переменную vue:

computed: {
    rules() {
      return rulesConstant;
    },
  },

Пример использования:

<v-checkbox
          class="custom-checkbox"
          :rules="[rules.gdprRequired]"
          v-model="gdprCheck"
        ></v-checkbox>

Можете вы помочь мне?


javascript vue.js vuejs2 vue-cli vue-i18n
person BobiDaHombre    schedule 21.01.2021    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Наиболее распространенный способ использования vue-i18n вне компонентов Vue — это импорт одноэлементного экземпляра класса VueI18n и его непосредственное использование:

@/i18n/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from './locales'

Vue.use(VueI18n);

export default new VueI18n({
  locale: 'en',
  messages: locales,
});

@/константы/правила

import i18n from '@/i18n/index.js'

const rules = {
  gdprRequired: (v) => !!v || i18n.t('registerPage.gdprNotChecked'),
  emailRules: [(v) => checkMail(v) || i18n.t('registerPage.wrongMail')],
}

export default rules

Таким образом, в вашем распоряжении будут все методы экземпляра, а не только t

person Michal Levý    schedule 27.01.2021