Question

我在本地化组件和视图字符串方面没有任何问题，但我想找到一种方法来动态地本地化工具栏项目（当然还有导航抽屉中的相同项目..

目前，它们在App.vue中显示为menuItems [i] .title

    <v-toolbar-items class="hidden-xs-only">
      <v-btn flat :to="menuItems[0].link">
        <v-icon left>{{ menuItems[0].icon }}</v-icon>
        <span>{{ menuItems[0].title }}</span>
      </v-btn>

使用脚本：

    <script>
    export default {
      data () {
        return {
          appName: 'myAPP',
          sideNav: false,
          menuItems: [
            { icon: 'home', title: 'Home', link: '/home' },
            { icon: 'info', title: 'About', menu: [{ title: 'Company', link: '/company' }, { title: 'Office', link: '/office' }] },
            { icon: 'people', title: 'Members', menu: [], link: '/members' },
            { icon: 'local_library', title: 'Blog', link: '/blog' },
            { icon: 'local_grocery_store', title: 'Shopping', link: '/shopping' }
          ]
        }
      },
      methods: {
          switchLocale: function (newLocale) {
            this.$store.dispatch('switchI18n', newLocale)
          }
        }
      }
    </script>

我应该使用计算值吗？或直接在模板中使用$ t（）？

反馈，建议和链接赞赏

更新

main.js

Vue.filter('translate', function (value) {
  if (!value) return ''
  value = 'lang.views.global.' + value.toString()
  return i18n.t(value)
})

区域设置/ I18N / EN_US

{
  "views": {
    "global": {
      "Home": "Home",
      "Section1": "Section 1",
      ..

Answer 1

Vue提供filter来帮助我们格式化常用文字。

所以我认为这将是你的选择之一。

您可以点击上面的链接，按照指南设置过滤器。

修改

我刚刚意识到Vue-filters不应该依赖于这个上下文as the Vue author said。所以我的答案更新如下：

然后代码如下：

// create vue-i18n instance const i18n = new VueI18n({ locale: getDefaultLanguage(), messages: langs }) // create global filter Vue.filter('myLocale', function (value) { return i18n.t(value) })

在您的观点或组件中：

<template> <v-toolbar-items class="hidden-xs-only"> <v-btn flat :to="menuItems[0].link"> <v-icon left>{{ menuItems[0].icon }}</v-icon> <span>{{ menuItems[0].title | myLocale }}</span> </v-btn> </template> <script> export default { data () { return { appName: 'myAPP', sideNav: false, menuItems: [ { icon: 'home', title: 'Home', link: '/home' }, { icon: 'info', title: 'About', menu: [{ title: 'Company', link: '/company' }, { title: 'Office', link: '/office' }] }, { icon: 'people', title: 'Members', menu: [], link: '/members' }, { icon: 'local_library', title: 'Blog', link: '/blog' }, { icon: 'local_grocery_store', title: 'Shopping', link: '/shopping' } ] } }, filters: { myLocaleWhichNotWork: function (value) { return this.$t(value) // this won't work because filters should not be dependent on this context } } } </script>

Vue.js vuetify i18n：如何动态翻译工具栏项目？

1 个答案: