Vue.js vuetify i18n：ツールバーアイテムを動的に変換する方法は？

debugcn 投稿 Dev

user762579

コンポーネントとビューの文字列をローカライズすることに問題はありませんが、ツールバーのアイテム（そしてもちろんナビゲーションドロワー内の同じアイテム）を動的にローカライズする方法を見つけることに固執しています。

現在、それらは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",
      ..

スフィンクス

Vueは、一般的なテキストのフォーマットに役立つフィルターを提供します。

だから私はそれがあなたの選択の一つになると思います。

上記のリンクをクリックして、ガイドに従ってフィルターを設定できます。

編集：

Vueの作者が言ったように、Vueフィルターはこのコンテキストに依存すべきではないことに気づきました。だから私の答えを以下のように更新しました：

その場合、コードは次のようになります。

// 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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]