学習方法

メンター情報

料金

対応時間帯

返信スピード

学習方法

メンター情報

料金

対応時間帯

返信スピード

募集をシェアしてメンターを探そう
シェア

※ この募集は締め切られました。

プログラミング Vue.js

i18nの変数が通らない & モーダルの自動消去

2022年2月5日
単発
予算
3,000円 〜 3,000円
提案数
3人が提案中
応募期限
終了

表題の通りです。
vue.jsのi18nに変数を渡してメッセージを表示させようとしています。
ドキュメントを読んでみましたが、自分の環境でどのように書いたら実現できるかわかりませんでした。

例えば以下のコードではnameというpropsにユーザー名が渡ってくるので、それをi18nに投げていますが、「お疲れ様です。nameさん」と表示されてしまいます。


<template>
<div class="alert alert-success" v-if="modal">
<span v-t="session_message"></span><br />
<p>{{ $t('auth_message.welcome', { name: 'name' }) }}</p>
</div>
</template>

<script>
export default{
data(){
return{
modal: true
}
},

props: ['session_message', 'name'],

created() {
window.setTimeout(function(){
this.modal = false
}, 3000);
},

}
</script>

ちなみに受け取り側では
"welcome": "お疲れ様です。{name}さん",
と定義しています。

さらにモーダルで表示させていますが、3秒経ったら自動で消えるようにもしたいと思っています。
ご提案よろしくお願い致します。

募集をシェアしてメンターを探そう
シェア