Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。ページに表示するテキストを、ロケールに応じて切り替えられます。インストールから基本的な設定と使い方までは「Vue.js: Vue I18nでアプリケーションを多言語に対応させる」でご説明しました。本稿では、公式ドキュメントに解説が見当たらず悩んだことをふたつ紹介します。

01 プレースホルダーを多言語化する

実は、プレイスホルダーを使うことは推奨されないようです。そうはいっても、入力例を示すなど、使う場面は少なくないでしょう。ところが、つぎのように記述すると、式($t('placeholder'))がそのまま表示されてしまい、翻訳テキストが取り出せませんでした。

<input type="text"
    placeholder="$t('placeholder')">

Vue I18nサイトのドキュメントには見当たらず、英語でも情報は多くありません。Stack Overflowで見つけたのが、v-bind(省略記法:)を加えなければならないということです。たったひと文字で、プレースホルダーが多言語化できました。

<input type="text"
    :placeholder="$t('placeholder')">

02 t()メソッドに渡すパスに変数を含める

翻訳テキストを取り出す$t()メソッドの第1引数には、テキストが収められたプロパティのパスを渡します。ここに変数を含めるにはどうしたらよいかです。具体的には、v-forディレクティブで複数要素を変数からつくりたい場合でした。

<div id="app">
    <ul>
        <li
            v-for="city in cities"
            :key="city">
            <!-- message[city]のテキストを取り出したい -->
        </li>
    </ul>
</div>

const messages = {
    en: {
        message: {
            tokyo: 'Tokyo',
            newyork: 'New York',
            london: 'London'
        }
    },
    ja: {
        message: {
            tokyo: '東京',
            newyork: 'ニューヨーク',
            london: 'ロンドン'
        }
    }
}
// ...[中略]...
new Vue({
    i18n,
    data: {cities: ['tokyo', 'newyork', 'london']}
}).$mount('#app')

試したところ、つぎの記述で翻訳テキスト「東京」または「Tokyo」が表示されました。

{{ $t("message['tokyo']") }}

それならと、つぎのように書いてみると、また式が表れてテキストは取り出せません。

{{ $t("message[city]") }}

こちらは検索では見つけることができず、VueのForum(英語)で質問してみたところ回答が得られました。messagesオブジェクトの感覚で捉えていたのがよくなかったようです。文字列のパスと考えるべきでした。

{{ $t("message." + city) }}

ご参考までにテスト用のサンプルをCodePenに上げておきます。

サンプル001■ Vue I18n Test

See the Pen Vue I18n Test by Fumio Nonaka (@FumioNonaka) on CodePen.