Vue i18n-$t未定义外部模板
Vue i18n-$t未定义外部模板
提问于 2021-05-03 21:19:55
嗨，所以如果我在模板中使用{{$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> //script part where $t not working <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未定义。我怎么才能让它工作呢？
回答 3
Stack Overflow用户
发布于 2021-05-03 23:36:15
我还没有学习过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 }
}
})Stack Overflow用户
发布于 2021-09-26 09:34:21
您可以通过导入来使用vue-I18N i18n outside模板(外部组件)，然后使用i18n.global中的"t“。
"t“不需要"$”，您可以使用i18n.global.locale.更改语言环境
import i18n from '../i18n';
const { t } = i18n.global;
i18n.global.locale = 'en-US'; // Change "Locale"
const data = {
name: t('name'), // "t" doesn't need "$"
description: t('description'), // "t" doesn't need "$"
};Stack Overflow用户
发布于 2021-05-03 21:22:55
啊，我明白了，您正在使用新的Vue3组合应用编程接口。嗯，vue-i18n有点落后，但是有next version 9的repo。升级软件包并遵循其migration instructions，然后在安装函数中使用您的翻译，如下所示：
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',
// ...
},
];
];
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67369652
复制相关文章
相似问题
腾讯云开发者
