Vue i18n-$t未在模板外部定义

Question

嗨，所以如果我在模板中使用{{$t('dash.port')}}，翻译就会发生，一切都很好。现在我有了一个antdv表，其中有这样声明的列：

const columns = [
{
title:"pone",
dataIndex: 'pone',
key: 'pone',
},
...
]

//这是antdv表组件：

<template>
<a-table :data-source="data" :columns="columns">
<template #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
<div style="padding: 8px">
<a-input
ref="searchInput"
:placeholder="`Search ${column.dataIndex}`"
:value="selectedKeys[0]"
style="width: 188px; margin-bottom: 8px; display: block"
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
@pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
/>
<a-button
type="primary"
size="small"
style="width: 90px; margin-right: 8px"
@click="handleSearch(selectedKeys, confirm, column.dataIndex)"
>
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
Reset
</a-button>
</div>
</template>
<template #filterIcon="filtered">
<search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
</template>
<template #customRender="{ text, column }">
<span v-if="searchText && searchedColumn === column.dataIndex">
<template
v-for="(fragment, i) in text
.toString()
.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
>
<mark
v-if="fragment.toLowerCase() === searchText.toLowerCase()"
class="highlight"
:key="i"
>
{{ fragment }}
</mark>
<template v-else>{{ fragment }}</template>
</template>
</span>
<template v-else>
{{ text }}
</template>
</template>
</a-table>

//$t不起作用的脚本部分

<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, ref } from 'vue';
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
..
];
export default defineComponent({
components: {
SearchOutlined,
},
setup() {
const state = reactive({
searchText: '',
searchedColumn: '',
});
const searchInput = ref();
const columns = [
{
title: 'pone',
dataIndex: 'pone',
key: 'pone',
slots: {
filterDropdown: 'filterDropdown',
filterIcon: 'filterIcon',
customRender: 'customRender',
},
onFilter: (value, record) =>
record.pone.toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => {
console.log(searchInput.value);
searchInput.value.focus();
}, 0);
}
},
},
....
];
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
state.searchText = selectedKeys[0];
state.searchedColumn = dataIndex;
};
const handleReset = clearFilters => {
clearFilters();
state.searchText = '';
};
return {
data,
columns,
handleSearch,
handleReset,
searchText: '',
searchInput,
searchedColumn: '',
};
},
});
</script>

我想要的是使用$t来更改标题，但当我执行title:"$t('dash.pone')",时，我会得到未定义的$t。我怎样才能做到这一点？

Answer 1

我还没有学习vue3，所以我不确定它是如何工作的，但你可能应该看看下面的所有例子：https://github.com/intlify/vue-i18n-next/tree/master/examples/composition

但也许这个有效？

const app = createApp({
setup() {
const { t, locale } = useI18n()
t('dash.port') // this one maybe works ?
return { t, locale }
}
})

Answer 2

啊，我明白了，您正在使用新的Vue3组合API。嗯，vue-i18n有点落后，但下一个版本9有回购。升级软件包并按照其迁移说明进行操作，然后在以下设置功能中使用翻译：

import { defineComponent, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';

setup() {
const { tm } = useI18n();
const columns = [
{
title: tm('dash.pone'),
dataIndex: 'pone',
key: 'pone',
// ...
},
];
];

Answer 3

使用vue3和API组合，我遇到了同样的问题，我用这个解决了问题

导入i18n(更改路径(

import i18n from '@/plugins/i18n'

然后访问$t函数

i18n.global.t("WordToTranslate")