vue nuxt i18n 多语言包分组循环输出翻译内容

今天遇到个nuxt多语言包循环输出语言包里的分组内容,网查了半天没有合适的代码
自己研究后解决
cn.json

{
  "test":{
    "1":"a",
    "2":"b",
    "3":"c"
  }
}

一般模板就是如下方式循环输出

<div v-for="(index, key) in 3" :key="key" >
       {{ key + 1 }}
       {{ t('test.'+index) }}
</div>

但根据官方文档使用tm和rm就可以轻松方便输出了

<script setup lang="ts">
const { tm, rt } = useI18n()
</script>
<div v-for="(index, key) in tm('test')" :key="key" >
       {{ key }}
       {{ rt('index') }}
</div>

官方文档地址:
https://vue-i18n.intlify.dev/api/composition.html#composer

此条目发表在服务器分类目录,贴了, 标签。将固定链接加入收藏夹。

发表回复