Laravel-Vue-i18n自动翻译在DataTables表格中失效问题排查

我有一个基于Vue.js 3与Laravel的项目，使用datatables.net构建数据表格，但表格内laravel-vue-i18n的自动翻译属性无法生效，恳请协助排查原因。

数据库截图：

以下是项目中包含laravel-vue-i18n自动翻译与DataTables表格的相关代码（Index.vue）：

<style>
</style>
<script setup>
    import { Head, Link,useForm } from '@inertiajs/vue3';
    import AdminLayout from '@/Pages/Admin/Components/AdminLayout.vue';
    import { trans } from "laravel-vue-i18n";
    import Checkbox from '@/Pages/Admin/Components/Checkbox.vue';
    import Filter from '@/Pages/Admin/Content/Brand/Filter.vue';

    import DangerButton from '@/Pages/Admin/Components/DangerButton.vue';
  
    import Pagination from '@/Pages/Admin/Components/Pagination.vue';

    import { usePage } from '@inertiajs/vue3'
    import { router } from '@inertiajs/vue3'

    import { ref } from 'vue';
    const props = defineProps({
        brands_count: {
            type: Number,
            brands:Object
        },
        
    });


    const brands = usePage().props.brands;
    const SelectBrand = ref(false);
    const SelectListBrands = ref([]);

    const SelectItembrand = () => {
        if(SelectBrand.value) {
            SelectListBrands.value = brands.map(brand => brand.id)
        } else {
            SelectListBrands.value = [];
        }
    
    }

    const onChecked = (id) => {
        
        const index = SelectListBrands.value.indexOf(id);
        if(index === -1) {
            SelectListBrands.value.push(id);
        } else {
            SelectListBrands.value.splice(index,1);
        }

    }


    const onDelete = (id) => {
        if(confirm(trans("you_delete_title"))){
            router.visit(route('admin.brand.delete'), {
                method: 'post',
                data: {
                    id: id

                },
            })
        }
    };
    const DeleteAllBrand = () => {
        if(confirm(trans("you_delete_title"))){
            router.visit(route('admin.brand.deleteAll'), {
                method: 'post',
                data: {
                    SelectListBrands: SelectListBrands.value

                },
            })
        }
    };

    const columns = [
        { data: 'id' },
        { data: 'name' },
        { data: 'is_active' },
        { data: 'created_at' },
    ];

</script>
<template>
    <AdminLayout>
        <Head :title="trans('brands')" />
        <div class="flex mb-5 justify-between ">
            <h1 class="font-semibold text-3xl text-gray-800 leading-tight"> {{ trans('brands') }} - {{ brands_count }}</h1>
            <div>
                <Link :href="route('admin.brand.create')" class="mr-3 bg-green_link rounded-lg hover:bg-green_link_hover text-white font-semibold py-3 px-4 border bg-green_link hover:border-transparent rounded">
                    <i class="fa-solid fa-plus"></i>
                    <span class="ml-2">{{trans("add_brand")}}</span>
                </Link>
                <DangerButton class="bg-red-500  text-white"  v-if="SelectListBrands.length>0" @click="DeleteAllBrand" >{{ trans('delete') }}</DangerButton>
       
            </div>
            
        </div>
        <!-- Filter of brand-->
        
        <Filter></Filter>
        
        <!-- -->

        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
            <DataTable
                :data="brands"
                :columns="columns"
                class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-medium py-4 uppercase text-white bg-bg_black_admin dark:bg-gray-700 dark:text-gray-400">
                    <tr > 
                        <th scope="col" class="px-6 py-6">{{ trans('brands') }}</th>
                        <th scope="col" class="px-6 py-3">Name</th>
                        <th scope="col" class="px-6 py-3">Is active</th>
                        <th scope="col" class="px-6 py-3">Created</th>
                    </tr>
                </thead>
            </DataTable>
        </div>
        
    </AdminLayout>
    
</template>

排查与解决方法 #

1. DataTables原生渲染跳过Vue翻译逻辑 #

你当前通过columns直接绑定字段，DataTables会直接渲染原始数据，不会触发Vue的trans函数。需要给需要翻译的列添加自定义渲染函数：

const columns = [
    { data: 'id' },
    { data: 'name' },
    { 
        data: 'is_active',
        render: (val) => val ? trans('active') : trans('inactive')
    },
    { data: 'created_at' },
];

2. 表头硬编码未翻译 #

把表头里的英文文本替换为trans调用，确保表头也能翻译：

<thead class="text-medium py-4 uppercase text-white bg-bg_black_admin dark:bg-gray-700 dark:text-gray-400">
    <tr> 
        <th scope="col" class="px-6 py-6">{{ trans('brands') }}</th>
        <th scope="col" class="px-6 py-3">{{ trans('name') }}</th>
        <th scope="col" class="px-6 py-3">{{ trans('is_active') }}</th>
        <th scope="col" class="px-6 py-3">{{ trans('created_at') }}</th>
    </tr>
</thead>

3. 确认i18n全局配置正确 #

检查项目入口文件（如app.js），确保laravel-vue-i18n已正确注册：

import { createApp } from 'vue'
import { createI18n } from 'laravel-vue-i18n'
import AdminLayout from './Pages/Admin/Components/AdminLayout.vue'

const app = createApp(AdminLayout)
app.use(createI18n({
    locale: 'zh-CN', // 对应你的语言文件
    fallbackLocale: 'en',
}))
app.mount('#app')

4. 验证翻译文件存在 #

检查resources/lang目录下的对应语言文件（如zh-CN/brand.php），确保包含所需翻译键：

return [
    'brands' => '品牌',
    'add_brand' => '添加品牌',
    'delete' => '删除',
    'you_delete_title' => '确定要删除吗？',
    'name' => '名称',
    'is_active' => '是否激活',
    'active' => '已激活',
    'inactive' => '未激活',
    'created_at' => '创建时间',
];

5. 改用Vue原生渲染表格（彻底解决兼容性问题） #

如果DataTables的封装组件和Vue翻译兼容性差，直接用Vue的v-for渲染表格内容，确保所有翻译逻辑都能被Vue处理：

<DataTable class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
    <thead class="text-medium py-4 uppercase text-white bg-bg_black_admin dark:bg-gray-700 dark:text-gray-400">
        <tr> 
            <th scope="col" class="px-6 py-6">{{ trans('brands') }}</th>
            <th scope="col" class="px-6 py-3">{{ trans('name') }}</th>
            <th scope="col" class="px-6 py-3">{{ trans('is_active') }}</th>
            <th scope="col" class="px-6 py-3">{{ trans('created_at') }}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="brand in brands" :key="brand.id">
            <td class="px-6 py-4">{{ brand.id }}</td>
            <td class="px-6 py-4">{{ brand.name }}</td>
            <td class="px-6 py-4">{{ brand.is_active ? trans('active') : trans('inactive') }}</td>
            <td class="px-6 py-4">{{ brand.created_at }}</td>
        </tr>
    </tbody>
</DataTable>

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