vue3 i18n 的 用法请教

Question

https://kazupon.github.io/vue-i18n/zh/introduction.html 官网

     <div v-html="treeHtmlStr">
            
            </div>

官方文档 html的插值写法是这样：     <li> {{$t(arr[i].title)}}</li>  //有效


const treeArr = [ ...  ]   // tree的数据
const treeHtmlStr =ref('')   // 插入 v-html
onmount(()=>{
    treeHtmlStr .value = treeShow(treeArr)
})

// Html 中会写了,但是在js中 $t 不识别,怎么解
 function treeShow(arr:any){
    let str='<ul>'
    for (let i=0,e=arr.length;i<e;i++){
  
      str += `<li>$t(${arr[i].title})</li>`    //这块怎么写 ，这样写不行 $t成字符串了
     
      str += `<li>${$t(arr[i].title})}</li>` /  /这块怎么写 ，这样写也不行 $t 不识别,报错
    }
    str = str + '</ul>'
    return str
  }

Answer 1

i18n什么版本的？以下是i18n v9版本示例

<div id="app">
    <p>{{ $t("message.hello") }}</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>
<script>

    const messages = {
        en: {
            message: {
                hello: 'hello world'
            }
        },
        ja: {
            message: {
                hello: 'こんにちは、世界'
            }
        }
    }

    const i18n = VueI18n.createI18n({
        locale: 'ja',
        fallbackLocale: 'en',
        messages,
    })

    let $t;
    const App = {
        mounted() {
            $t = [...i18n.__instances][0][1].t;
            alert($t("message.hello") + '\n\n' + $t("message.hello", 'en'))
        }
    }

    const app = Vue.createApp(App)
    app.use(i18n);

    app.mount('#app');
</script>