我想将 vue-i18n 用于 vuetify 导航栏与 v-for ...（帮助）
Posted
技术标签:
【中文标题】我想将 vue-i18n 用于 vuetify 导航栏与 v-for ...（帮助）【英文标题】：I want to use vue-i18n for vuetify navigation bar with v-for ... (help) 【发布时间】：2020-08-09 18:54:39 【问题描述】：我的代码是这样的
<v-navigation-drawer v-model="drawer" clipped app>
<v-list dense>
<span v-for="navitem in navitems" :key="navitem.subtitle">
<v-subheader v-if="navitem.subtitle"> navitem.subtitle </v-subheader>
<span v-if="navitem.subitem">
<v-list-group :prepend-icon="navitem.icon" v-model="navitem.active">
<template v-slot:activator>
<v-list-item-title> navitem.title </v-list-item-title>
</template>
<span v-for="subitem in navitem.subitems" :key="subitem">
<span v-if="subitem.miniitems">
<v-list-group sub-group>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title style="margin-left:10px"> this.$i18n.$t('subitem.title')
</v-list-item-title>
</v-list-item-content>
</template>
<span v-if="subitem.mini">
<span v-for="mini in subitem.miniitems" :key="mini">
<v-list-item router link :to="mini.routes">
<!-- don't remove this -->
<v-list-item-icon>
<!-- <v-icon> mini.name </v-icon> -->
</v-list-item-icon>
<v-list-item-title v-text="mini.title"></v-list-item-title>
</v-list-item>
</span>
</span>
</v-list-group>
</span>
<span v-else>
<v-list-item sub-group router link :to="subitem.routes">
<v-list-item-content>
<v-list-item-title v-text="subitem.title" style="margin-left: 57px;">
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</span>
</span>
</v-list-group>
</span>
<span v-else>
<v-list-item router link :to="navitem.routes">
<v-list-item-icon>
<v-icon> navitem.icon </v-icon>
</v-list-item-icon>
<v-list-item-title> navitem.title </v-list-item-title>
</v-list-item>
</span>
</span>
</v-list>
<v-divider></v-divider>
</v-navigation-drawer>
有以下数据....
navitems: [
icon: 'dashboard',
title: 'Dashboard',
subtitle: 'Pages',
active: false,
subitem: true,
routes: '',
subitems: [
title: 'Default',
active: true,
mini: true,
routes: '/',
,
title: 'Analytics',
active: true,
routes: '/dashboardanalytics',
,
title: 'Ecommerce',
active: true,
routes: '/dashboardecommerce',
,
title: 'Social',
active: true,
routes: '/dashboardsocial',
,
title: 'Crypto',
active: true,
routes: '/dashboardcrypto',
]
,
icon: 'library_books',
title: 'Pages',
active: false,
subitem: true,
subitems: [
title: 'Profile',
routes: '/profile'
,
title: 'Settings',
routes: '/settings'
,
title: 'Clients',
routes: '/clients'
,
title: 'Projects',
active: true,
routes: '',
mini: true,
miniitems: [
title: 'List',
routes: '/list'
,
title: 'Detail',
routes: '/detail'
]
,
title: 'Invoice',
active: true,
routes: '/invoice'
,
title: 'Pricing',
active: true,
routes: '/pricing'
,
title: 'Tasks',
active: true,
routes: '/tasks'
,
title: 'Chat',
active: true,
routes: '/chat'
,
title: 'Blank Page',
active: true,
routes: '/blank-page'
]
,
icon: 'group',
title: 'Auth',
active: false,
subitem: true,
routes: '',
subitems: [
title: 'Sign In',
routes: '/signin',
active: true
,
title: 'Sign Up',
routes: '/signup',
active: true
,
title: 'Reset Password',
routes: '/reset-password',
active: true
,
title: '404 Page',
routes: '/404',
active: true
,
title: '500 Page',
routes: '/500',
active: true
,
],
,
icon: 'import_contacts',
title: 'Documentation',
active: false,
subitem: true,
subitems: [
title: 'Introduction',
routes: '/introduction',
,
title: 'Getting Started',
routes: '/getting-started',
,
title: 'Plugins',
routes: '/plugins'
,
title: 'Changelog',
routes: '/changelog'
],
,
icon: 'layers',
title: 'UI Elements',
subtitle: 'Tool & Components',
subitem: true,
active: false,
subitems: [
title: 'Alerts',
routes: '/alerts'
,
title: 'Buttons',
routes: '/buttons'
,
title: 'Cards',
routes: '/cards'
,
title: 'Carousel',
routes: '/carousel'
,
title: 'Embed Video',
routes: '/embed-video'
,
title: 'General',
routes: '/general'
,
title: 'Grid',
routes: '/grid'
,
title: 'Modals',
routes: '/modals'
,
title: 'Tabs',
routes: '/tabs'
,
title: 'Typography',
routes: '/typography'
]
,
icon: 'favorite',
title: 'Icons',
subitem: true,
active: false,
subitems: [
title: 'Matrial Design Icon',
routes: '/mtd'
,
title: 'Font Awesome 5',
routes: '/FA5'
]
,
icon: 'done',
title: 'Forms',
subitem: true,
active: false,
subitems: [
title: 'Layouts',
routes: '/layouts'
,
title: 'Basic Inputs',
routes: '/basic-inputs'
,
title: 'Input Groups',
routes: '/input-groups'
]
,
icon: 'table_chart',
title: 'Tables',
routes: '/table'
,
icon: 'check_box',
title: 'Form Plugins',
subtitle: 'Plugin & Addons',
subitem: true,
active: false,
subitems: [
title: 'Advanced Inputs',
routes: '/advanced-inputs'
,
title: 'Editors',
routes: '/editors'
,
title: 'Validation',
routes: '/validation'
,
title: 'Wizard',
routes: '/wizard'
]
]
我想使用 i18n 来显示要国际化的可见文本（标题、文本）......但我目前无法提供任何帮助......我正在使用 i18n.js
const messages =
'us':
dashboard: 'Dashboard',
profile: 'Profile',
analytics: 'Analytics',
settings: 'Settings',
help: 'Help',
signout: 'Sign Out',
,
'np':
dashboard: 'ड्यासबोर्ड',
profile: 'प्रोफाइल',
analytics: 'विश्लेषण',
settings: 'सेटिंग्स',
help: 'मद्दत',
signout: 'साइन आउट गर्नुहोस्',
;
const i18n = new VueI18n(
locale: 'us', // set locale
fallbackLocale: 'np', // set fallback locale
messages, // set locale messages
);
export default i18n;
我知道他们现在只是来自数据的仪表板，但我不知道如何翻译标题和文本...我试过 $t('navitem.subtitle') 但不要'T THINK that'll work...我尝试了其他方法但行不通....
【问题讨论】：
【参考方案1】：我实现了一个 Vuetify <navigation-drawer>，它从 Vue 路由器加载它的路由并使用 Vue i18n in this codepen 转换它们。我没有实现你所有的路线，但它应该足以让你开始。
这是我的 i18n 翻译。 （如果我把尼泊尔语弄错了，请原谅我！！我用的是谷歌翻译。）要注意的关键是我用'en'而不是'us'作为语言。虽然'en-us' 可能是有效的语言代码，但我不确定'us' 是否正确。
const i18n = new VueI18n(
locale: 'en',
fallbackLocale: 'np',
messages:
'en':
analytics: 'Analytics',
dashboard: 'Dashboard',
detail: 'Detail',
ecommerce: 'E-Commerce',
list: 'List',
pages: 'Pages',
profile: 'Profile',
projects: 'Projects',
'select-language': 'Select language',
settings: 'Settings',
,
'np':
analytics: 'विश्लेषण',
dashboard: 'ड्यासबोर्ड',
detail: 'विवरण',
ecommerce: 'e- वाणिज्य',
list: 'सूची',
pages: 'पृष्ठहरु',
profile: 'प्रोफाइल',
projects: 'प्रोजेक्टहरू',
'select-language': 'भाषा छनोट गर्नुस',
settings: 'सेटिंग्स',
)
接下来，这里是实现为 Vue Router 实例的导航项。请注意，我确实NOT为每条路线包含component 属性，但您需要在自己的应用程序中执行此操作。另请注意，对于 icon 属性，我使用了 Vuetify 中内置的 material design icons。
const router = new VueRouter(
routes: [
name: 'dashboard',
path: '/dashboard',
meta:
icon: 'mdi-view-dashboard',
,
children: [
name: 'analytics',
path: '/analytics',
meta:
icon: 'mdi-finance',
,
,
name: 'ecommerce',
path: '/ecommerce',
meta:
icon: 'mdi-store',
,
,
],
,
name: 'pages',
path: '/pages',
meta:
icon: 'mdi-book-open-variant',
,
children: [
name: 'settings',
path: '/settings',
meta:
icon: 'mdi-cogs',
,
,
name: 'projects',
path: '/projects',
meta:
icon: 'mdi-briefcase',
,
children: [
name: 'list',
path: '/list',
meta:
icon: 'mdi-format-list-bulleted',
,
name: 'detail',
path: '/detail/:id',
meta:
icon: 'mdi-file-document',
,
],
,
],
,
name: 'profile',
path: '/profile',
meta:
icon: 'mdi-account-circle',
,
,
],
)
要将这些合并到您的应用程序中，您的主 Vue 实例应该像这样实例化：
new Vue(
vuetify: new Vuetify(),
i18n,
router,
render: h => h(App),
).$mount('#app')
最后，这是我用来生成菜单的模板。我包括了一个语言切换器，所以你可以看到它来回切换。这应该与您所拥有的非常相似。
<v-navigation-drawer permanent>
<v-toolbar color="primary" dark prominent>
<v-toolbar-title>
<p class="overline"> $t('select-language') :</p>
<v-radio-group
v-model="$i18n.locale"
:mandatory="true"
>
<v-radio label="नेपाल" value="np"></v-radio>
<v-radio label="English" value="en"></v-radio>
</v-radio-group>
</v-toolbar-title>
</v-toolbar>
<v-list dense expand nav>
<template v-for="route in $router.options.routes">
<v-list-item
v-if="!route.children"
color="primary"
:key="route.name"
:to="route.path"
>
<v-list-item-icon>
<v-icon> route.meta.icon </v-icon>
</v-list-item-icon>
<v-list-item-title> $t(route.name) </v-list-item-title>
</v-list-item>
<v-list-group
v-else
:group="route.path"
color="primary"
>
<template #activator>
<v-list-item-icon>
<v-icon> route.meta.icon </v-icon>
</v-list-item-icon>
<v-list-item-title>
$t(route.name)
</v-list-item-title>
</template>
<template v-for="child in route.children">
<v-list-item
v-if="!child.children"
:key="child.name"
:to="route.path + child.path"
>
<v-list-item-icon>
<v-icon v-text="child.meta.icon" />
</v-list-item-icon>
<v-list-item-title>
$t(child.name)
</v-list-item-title>
</v-list-item>
<v-list-group
v-else
color="primary"
:group="child.path"
sub-group
>
<template #activator>
<v-list-item-content>
<v-list-item-title>
<v-icon> child.meta.icon </v-icon>
$t(child.name)
</v-list-item-title>
</v-list-item-content>
</template>
<template v-for="grandchild in child.children">
<v-list-item
:key="grandchild.name"
color="primary"
:to="route.path + child.path + grandchild.path"
>
<v-list-item-title> $t(grandchild.name) </v-list-item-title>
<v-list-item-icon>
<v-icon> grandchild.meta.icon </v-icon>
</v-list-item-icon>
</v-list-item>
</template>
</v-list-group>
</template>
</v-list-group>
</template>
</v-list>
</v-navigation-drawer>
希望这会有所帮助！
【讨论】：
感谢您的回复..会继续努力的..使用尼泊尔语的感觉很好... :)以上是关于我想将 vue-i18n 用于 vuetify 导航栏与 v-for ...（帮助）的主要内容，如果未能解决你的问题，请参考以下文章