有没有办法在vue3中以i18n格式写入表中的标题

Question

我想在表中以i18n格式写入标题名称。我在我的项目中使用vue3。(当然还有打字稿(。提前谢谢！

这是我的html代码

<Datatable
:table-data="tableData"
:table-header="tableHeader"
:enable-items-per-page-dropdown="false"
:loading="isTableLoading"
:is-pagination="false"
class="activity-table"
>
.
.
. </Datatable>

这是我的脚本代码

import { useI18n } from "vue-i18n/index";
const { t, te } = useI18n();
const tableHeader = ref([
{
name: "Username",
key: "name",
sortable: false,
},
{
name: "Email",
key: "email",
sortable: false,
},
{
name: "Phone",
key: "phone",
sortable: false,
},
.
.
. ]);

Answer 1

As脚本代码将在组件加载之前执行。因此，i18n库可能在那时不可用。因此，您可以尝试在mounted()生命周期挂钩中转换组件本身中的tableHeader对象属性。

示例(在vue组件中(：

mounted() {
this.tableHeader.forEach((obj) => {
obj.name = this.$t(obj.name)
});
}