我想将 vue-i18n 用于带有 v-for 的 vuetify 导航栏 ...（帮助）
I want to use vue-i18n for vuetify navigation bar with v-for ... (help)
我的代码是这样的
<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') }}但不要认为那会奏效...我尝试过其他方法但不会奏效....
我实现了一个 Vuetify <navigation-drawer>，它从 Vue Router 加载它的路由，并用 Vue i18n in this codepen 翻译它们。我没有实现你所有的路线，但它应该足以让你开始。
这是我的国际化翻译。 （如果我有一些尼泊尔语错误，请原谅我！！我使用了 Google 翻译。）需要注意的关键是我使用 '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 路由器实例实现的导航项。请注意，我 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>
希望对您有所帮助！
我的代码是这样的
<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') }}但不要认为那会奏效...我尝试过其他方法但不会奏效....
我实现了一个 Vuetify <navigation-drawer>，它从 Vue Router 加载它的路由，并用 Vue i18n in this codepen 翻译它们。我没有实现你所有的路线，但它应该足以让你开始。
这是我的国际化翻译。 （如果我有一些尼泊尔语错误，请原谅我！！我使用了 Google 翻译。）需要注意的关键是我使用 '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 路由器实例实现的导航项。请注意，我 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>
希望对您有所帮助！