vue3 使用vue-i18n国际化组间

国际化遇到问题，数组遍历
代码如下

img


引入国际化并使用

img

语言文件中如下配置

img


为什么页面效果不是将question遍历出来
现在的效果如下

img


期望效果

img

img


js部分

img

语言配置页面

img

【以下回答由 GPT 生成】

问题原因是在Vue 3中，vue-i18n的用法与Vue 2有所不同。在Vue 3中，可以通过i18n.global对象来访问全局的翻译函数。在组件中使用useI18n()方法返回的t函数只能用于单个翻译字段的翻译。

要解决这个问题，可以稍微修改代码如下：

// 引入国际化并使用
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();

    // 在语言文件中的配置
    const questions = [
      { id: 1, question: t('questions.question1') },
      { id: 2, question: t('questions.question2') },
      { id: 3, question: t('questions.question3') },
    ];

    return {
      questions
    };
  }
}

然后在模板中使用v-for指令遍历questions数组并输出问题：

<template>
  <div>
    <div v-for="(item, index) in questions" :key="index">
      {{ item.question }}
    </div>
  </div>
</template>

这样就可以正确遍历和输出问题了。

希望这个解决方案对你有帮助！如果还有其他问题，请随时提问。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^