如何用vue-i18n翻译v-data-table表头数组对象的属性？

方案一：使用计算属性（推荐） #

将headers定义为计算属性，利用Vue响应式系统追踪i18n翻译函数的依赖，语言切换时自动重新生成表头数组：

<script setup lang="ts">
import { useI18n } from "vue-i18n"
import { computed } from 'vue'

const { t } = useI18n()

const headers = computed(() => [
  {
    title: t('Request number'),
    align: 'start',
    sortable: true,
    key: 'numeroPedido',
  },
  ...otherObjects
])
</script>

原理：计算属性会自动追踪内部响应式依赖（这里是i18n的语言环境），当语言切换时，t()返回值更新，计算属性重新执行生成新的表头数组，触发v-data-table重新渲染。

方案二：监听语言变化手动更新 #

通过监听i18n的locale属性，在语言切换时手动重新赋值headers：

<script setup lang="ts">
import { useI18n } from "vue-i18n"
import { ref, watch } from 'vue'

const { t, locale } = useI18n()

const headers = ref([
  {
    title: t('Request number'),
    align: 'start',
    sortable: true,
    key: 'numeroPedido',
  },
  ...otherObjects
])

watch(locale, () => {
  // 语言变化时重新生成表头数组
  headers.value = [
    {
      title: t('Request number'),
      align: 'start',
      sortable: true,
      key: 'numeroPedido',
    },
    ...otherObjects
  ]
})
</script>

原理：监听locale变化，语言切换时手动调用t()更新表头title字段，通过修改ref的值触发组件重新渲染。

原方案无效原因 #

最初用ref定义headers时，t('Request number')仅在组件初始化时执行一次，生成静态文本。语言切换时，ref内部的title值不会自动更新，因为未建立与i18n语言环境的响应式依赖关系。

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