今天遇到个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