Vue+I18n场景下，如何根据locale动态渲染API返回的多语言字段？

直接使用属性访问符 #

因为locale是字符串类型，你可以直接通过方括号语法访问对象的对应属性，完全不需要一堆v-if：

<template>
  <div>{{ data.name[locale] }}</div>
  <div>{{ data.description[locale] }}</div>
</template>

这种写法会自动根据当前locale的值（比如'en'、'fr'）匹配对应的字段，简洁高效。

处理语言缺失的 fallback 逻辑 #

如果某些语言没有对应的翻译值，可以添加 fallback 逻辑，比如默认回退到英文：

方法1：模板内直接处理 #

<template>
  <div>{{ data.name[locale] || data.name.en }}</div>
  <div>{{ data.description[locale] || data.description.en }}</div>
</template>

方法2：封装成工具函数（推荐） #

在组件内封装一个复用函数，避免重复写fallback逻辑：

import { useI18n } from 'vue-i18n'
const { locale } = useI18n({ useScope: 'global' })

// 封装多语言取值函数
const getLocalizedValue = (obj) => {
  return obj[locale.value] || obj.en // 优先用当前locale，不存在则用英文
}

然后在模板里调用：

<template>
  <div>{{ getLocalizedValue(data.name) }}</div>
  <div>{{ getLocalizedValue(data.description) }}</div>
</template>

进阶：全局注册工具函数 #

如果多个组件都需要用到这个逻辑，可以把函数封装成composable，方便全项目复用：

封装成composable（useLocalizedData.js） #

import { useI18n } from 'vue-i18n'

export const useLocalizedData = () => {
  const { locale } = useI18n({ useScope: 'global' })

  const getLocalizedValue = (obj, fallbackLocale = 'en') => {
    return obj[locale.value] || obj[fallbackLocale]
  }

  return { getLocalizedValue }
}

然后在组件中使用：

import { useLocalizedData } from '@/composables/useLocalizedData'
const { getLocalizedValue } = useLocalizedData()

内容的提问来源于stack exchange，提问作者Natalia