Question

我在网站上使用VueI18n支持两种语言，在VueJS上构建，但现在我想在这两种语言之间切换。你能帮帮我吗？

main.js：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {messages} from './locales/bg_en_messages'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // set locale
  messages // set locale messages
});

const app = new Vue({
  i18n,
  el: '#app',
  render: h => h(App),
  router
})

./区域设置/ bg_en_messages.js：

export const messages = {
  bg: {
    labels: {
      personName: 'Име на лицето'
    }
  },
  en: {
    labels: {
      personName: 'Name of person'
    }
  }
}

VueJS：

<label>{{ $t("labels.personName") }}</label>

我想放一个下拉菜单或一个用于在两种语言之间切换的按钮。我正在查看VueI18n的文档，但没有太多信息，所以如果你帮助我，我将不胜感激。 :)

更新了帖子：

我让它切换语言。现在我还有一个关于vue-good-table和vueI18n的问题。

我有一张桌子：

<template>
  <vue-good-table
    :columns="columns"
    :rows="items"
    :paginate="true"
    :lineNumbers="true">
  </vue-good-table>
</template>

columns: [
          {
            label: 'Column1',
            field: 'column1',
            type: 'String',
            filterable: true,
            placeholder: 'Column1'
          },
          {
            label: 'Column2',
            field: 'column2',
            type: 'String',
            filterable: true,
            placeholder: 'Column2'
          },
          {
            label: 'Column3',
            field: 'column3',
            type: 'String',
            filterable: true,
            placeholder: 'Column3'
          },
          {
            label: 'Column3',
            field: 'column3',
            type: 'String',
            filterable: true,
            placeholder: 'Column3'
          }
        ]

我可以以某种方式为此{{$ t（＆＃34; label.column1＆＃34;）}}添加标签。现在标签只接受字符串，但我也需要更改列的语言。

Answer 1

您可以在github issue之后尝试在Vue实例中创建一个getter和一个setter：

app.i18n = new VueI18n({
    locale: 'es',
    fallbackLocale: 'es',
    messages
  })

  Object.defineProperty(Vue.prototype, '$locale', {
    get: function () {
      return app.i18n.locale
    },
    set: function (locale) {
      app.i18n.locale = locale
    }
  })

  // this part happens later

 new Vue(app)

并在任何地方使用它：

this.$locale // root Vuei18n locale    
this.$locale = 'en' // set root Vuei18n locale
// or
this.$root.i18n.locale // root Vuei18n locale    
this.$root.i18n.locale  = 'en' // set root Vuei18n locale

在语言VueI18n之间切换

1 个答案: