Help us understand the problem. What is going on with this article?

Vue.js: Vue I18nの公式ドキュメントに見当たらず悩んだふたつのこと

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.

Appendix TodoMVCを日英対応にする

Vue.js + CLI入門」は、公式サイト「TodoMVC の例」をVue CLIによる単一ファイルコンポーネント(vueファイル)でつくり直しました。さらに、これをVue I18nで日英対応にしたのが「Vue.js + Vue I18n: アプリケーションを多言語に対応(国際化)させる」の作例です。こちらはCodeSandboxに公開しています。興味がある方はリンクの解説をお読みください。

サンプル002■ vue-i18n-todo-mvc

FN1910002_007.png
>> CodeSandboxへ

FumioNonaka
はなし家、もの書き、コード書き。詳しくはwebで。 担当講座: 電気通信大学ウェブシステムデザインプログラム「Web UI・UXプログラミング演習I・Ⅱ」 https://www.websys.edu.uec.ac.jp/ ロクナナワークショップ「Vue.js入門講座」 https://67.org/ws/workshop/detail/0136javascript.html
http://www.fumiononaka.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした