nuxt-i18nで言語の切り替えをしたときに翻訳されない問題について

nuxt-i18nを使ってi18nしていたサイトでsetLocaleしたにも関わらず言葉が切り替わらない部分があったのでメモ

やったこと

翻訳する部分をdata関数内で定義したものを渡すとsetLocaleしたときに切り替わらないので算出プロパティ内で定義することで解決。

例

• 失敗例

<template>
  <div id="hoge">
    {{ item }}
  </div>
</template>

<script>
// setLocale時にitemの内容が翻訳されない(ページ遷移を行うと翻訳される)
export default {
  data() {
    return {
      item: this.$t('翻訳')
    }
  }
}
</script>

• 成功例

<template>
  <div id="hoge">
    {{ item }}
  </div>
</template>

<script>
// setLocale時にitemの内容が同時に翻訳される
export default {
  computed: {
    item() {
      return this.$t('翻訳')
    }
  }
}
</script>

なぜ？

算出プロパティcomputedはリアクティブな要素に変更があった際に更新される(?)らしく、setLocaleによりthis.$root.$i18n.localeが変更されるためそこでthis.$t('翻訳')が呼び出されて翻訳が行なわれると考えられます。 また、data関数内で定義した際はVueインスタンスが生成された段階でこれ以上再計算は行なわれないため、再描画(別のページから遷移)しなければ翻訳がされないと考えられます。

まとめ

今回の例程度であればtemplate内で{{ $t('翻訳') }}とするのが良さそうですが、子コンポーネントにプロパティとして渡す場合などにdata関数内で定義してしまい詰まったのでcomputedの中に書くといいというやつでした。

参考にしたサイト

jp.vuejs.org

jp.vuejs.org