使用 Vuetify 进行国际化

本文介绍了使用 Vuetify 进行国际化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在尝试制作具有多种语言的应用.

I'm trying to make an app with multiple languages.

我按照文档说的做了，但没有用.

I did what the documentation says but it does not work.

这是我的代码.

window.Vue = require('vue');
import Vuetify from './Vuetify/vuetify';
import en from './Vuetify/Lang/en/en.ts';
import es from './Vuetify/Lang/es/es.ts';
Vue.use(Vuetify, {
   lang: {
       locales: {
           es,
           en,
       },
       current: 'es'
   }
})
const app = new Vue({
   el: '#app',
   components: {
       "vue-landing": require('./components/ExampleComponent.vue'),
   },
   created() {
       this.$vuetify.lang.current = 'es'
   },
 }).$mount('#app');

在我的组件中

<template>
    <v-content>
      {{ $vuetify.t('noDataText') }}
    </v-content>
</template>

一切正常编译没有错误，但它不翻译任何东西.结果总是我在函数中写的.

Everything compiles normal without errors, but it does not translate anything. the results are always what I write within the function.

在这种情况下出现的是

noDataText

推荐答案

不确定，您使用的是哪个版本的 vuetify.js，但已根据此 issue，在尚未发布的 1.4.0 版本中，可能是这就是问题所在.

Not sure, which version of vuetify.js you are using, but Spanish locale was added, as per this issue, in version 1.4.0 which is not yet released, may be that is the issue.

更新:

在这个问题中登录的vuetify翻译文档有错误，更改您的模板:

There is an error in vuetify translation document as logged in this issue, change your template to:

<template>
    <v-content>
      {{ $vuetify.t('$vuetify.noDataText') }}
    </v-content>
</template>

它会解决您的问题.

在线演示.

这篇关于使用 Vuetify 进行国际化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！