typescript - 在 Vue 打字稿中使用 i18n
问题描述
在VUE上学习TS的时候出现这样的问题
我有一个用于渲染菜单的组件,我在其中连接数据
...
import ArrowRoundedDown9x6Svg from '~/svg/arrow-rounded-down-9x6.svg'
import headerNavigation from '~/data/headerNavigation'
@Component({
components: { AppLink, Megamenu, Menu, ArrowRoundedDown9x6Svg }
})
export default class NavLinks extends Vue {
items: INav = headerNavigation
hoveredItem: INavLink | null = null
...
在其中我连接数据
import headerNavigation from '~/data/headerNavigation'
但是,在这个文件中我需要连接 i18n 来切换语言,我不知道该怎么做。里面没有构造函数
import { INav } from '~/interfaces/menus/nav'
import { TranslateResult } from 'vue-i18n' // I create import
const dataHeaderNavigation: INav = [
{
title: "Home"
url: '/',
}
export default dataHeaderNavigation
因此,如果我尝试这样做,我会得到一个错误
const dataHeaderNavigation: INav = [
{
title: this.TranslateResult.get("header.links.Home").subscribe(value => { this.Home= value });
^^^
url: '/',
}
Error: Object is possibly 'undefined'.
en.json
{
"header": {
"links": {
"Home": "Home Page"
}
}
}
如何正确链接到翻译的元素?
解决方案
需要添加一个Vue实例
import Vue from 'vue'
import { INav } from '~/interfaces/menus/nav'
const dataHeaderNavigation: (vue: Vue) => INav = vue => [
{
title: vue.$t('header.menu.home'),
url: '/'
}]
还需要检查接口是否允许返回
import {LocaleMessage} from 'vue-i18n'
export interface ILink {
title: string | LocaleMessage;
url?: string;
}
推荐阅读
- eclipse - model.ecore 在 maven 'clean install' 目标期间未生成 project\target\classes\package\gen\model\impl
- c++ - 为什么我们在从向量中删除时需要递减迭代器?
- android - 在Android工具栏中将项目定位在左侧和中心?
- arrays - 按属性和其他数组过滤数组
- prometheus - 在 prometheus + grafana 中按月获取聚合
- python-3.x - 如何将复数矩阵从 MATLAB 发送到 Python
- python - django-filter 中的部分匹配
- visual-studio-code - 如何更改 Linux 上的 Visual Studio 代码缩进热键?
- go - 通过 RPC 传递不同类型的“基础”结构的惯用方式?
- python - 我的模型产生 1.0 的训练准确度和验证准确度,但预测的标签不正确