vue.js - 如何在 vuetify 中设置语言？

Question

我正在尝试使用以下设置语言环境:

Vue.use(Vuetify, {
    lang: {
        locales: { 
            'en-US' : {
                "dataIterator": {
                    "rowsPerPageText": "Items per page:",
                    "rowsPerPageAll": "All",
                    "pageText": "{0}-{1} of {2}",
                    "noResultsText": "No matching records found",
                    "nextPage": "Next page",
                    "prevPage": "Previous page"
                },
                "dataTable": {
                    "rowsPerPageText": "Rows per page:"
                },
                "noDataText": "No data available"
            } 
        },
        current: 'en-US'
    }
});

然后我改变了当前的语言环境:

this.$vuetify.lang.current = 'en-US';

但我收到有关 Vue 没有针对当前语言环境的翻译的警告。

有谁知道为什么？

Answer 1

如果您使用 CDN 中的 Vuetify(在浏览器中通过 <script> 标签)，Vue 在加载脚本时已经安装了 Vuetify 插件，因此调用 Vue.use(Vuetify, ...)再后来居然没有效果。默认的(也是唯一的)可用的语言环境是 en .

您仍然可以在 App 中更新可用的语言环境。的created钩:

created() {
  this.$vuetify.lang.locales = {
    en: {
      noDataText: 'Nothing'
    },
    es: {
      noDataText: 'Nada'
    }
  }
},

new Vue({
  el: '#app',
  created() {
    this.$vuetify.lang.locales = {
      en: {
        noDataText: 'Nothing'
      },
      es: {
        noDataText: 'Nada'
      }
    }
  },
  methods: {
    changeLocale() {
      const currentLang = this.$vuetify.lang.current;
      this.$vuetify.lang.current = currentLang === 'es'
                                 ? 'en'
                                 : 'es';
    }
  }
})

<script src="https://unpkg.com/vue@2.6.7"></script>
<script src="https://unpkg.com/vuetify@1.5.4/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@1.5.4/dist/vuetify.min.css">

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-btn @click="changeLocale">Change locale</v-btn>
        <div>{{ $vuetify.lang.current }} - {{ $vuetify.t('$vuetify.noDataText') }}</div>
      </v-container>
    </v-content>
  </v-app>
</div>