与
ESC
输入关键词搜索文章

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

全文约 114 字预计阅读 1 分钟
今天遇到个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
vue nuxt i18n 多语言包分组循环输出翻译内容
分享

发表评论

评论 0 条

暂无评论,来说点什么吧。