vue.js - 使用 Vuetify 进行国际化

Question

我正在尝试制作一款支持多种语言的应用。

我按照文档中的说明进行操作，但它不起作用。

这是我的代码。

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>

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

在这种情况下出现的是

无数据文本

Answer 1

不确定，您使用的是哪个版本的 vuetify.js，但是添加了西类牙语言环境，根据此 issue ，在尚未发布的版本 1.4.0 中，可能就是这个问题。

更新:

登录时vuetify翻译文档出现错误this issue ，将您的模板更改为:

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

它将解决您的问题。

Online demo .