placeholderを多言語化する方法【Vue.js】

こちらでも書いた部分にはなるのですが、vue-i18nで多言語化をするにあたって少し詰まったところがあるので残します。

問題点

vue-i18nを使う場合、

<div>{{$t('message.welcome')}}</div>

このように書く必要があります。

ただ、placeholderの文字を多言語化するにあたって、どういう風にかけば良いか悩みました。

//ファイルアップロード部分
<v-file-input
  v-model="file"
  @change="setImage"
  accept="image/*"
  prepend-icon="mdi-camera"
  placeholder="ここにプレースホルダーに表示させる文字" //<=この部分をどう多言語化する？
></v-file-input>

解決策

その部分に関して書いてあるものが少なく少し悩んだのですが、公式ドキュメントを見るとどうやらv-bindさせて書けば良さそうだったので、以下のようにして書きました。

//ファイルアップロード部分
<v-file-input
  v-model="file"
  @change="setImage"
  accept="image/*"
  prepend-icon="mdi-camera"
  :placeholder="$t('message.welcome')"
></v-file-input>

これでOK。

感想

わかれば単純なことなのですが、調べてもピンポイントで出てくる記事が少なく、公式ドキュメントを１から読むことになってしまいました。

これはplaceholderだけではなく、他の部分でも活用できそうですね。