Мой код похож на
<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')}}, но НЕ ДУМАЙ это сработает ... Я пробовал другие способы, но не работает ....
