Vue.js 我想使用vue-i18n for vuetify导航栏和v-for。。。（帮助）

我的代码可能是这样的

<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>

我想使用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

，它从Vue路由器加载它的路由，并用Vue i18n翻译它们。我没有实施你所有的路线，但这应该足以让你开始

这是我的i18n翻译。（如果我把一些尼泊尔语搞错了，请原谅！！我使用了谷歌翻译。）需要注意的关键是，我使用了

'en'

而不是

'us'

作为语言。虽然

'en-us'

可能是一个有效的语言代码，但我不确定仅仅

'us'

是否正确

const i18n=new VueI18n({
地区：'en'，
后备语言环境：“np”，
信息：{
"嗯":{
分析：“分析”，
仪表板：“仪表板”，
细节：“细节”，
电子商务：“电子商务”，
列表：“列表”，
页面：'页面'，
简介：'简介'，
项目：“项目”，
“选择语言”：“选择语言”，
设置：“设置”，
},
“np”：{
分析：'विश्लेषण',
仪表板：'ड्यासबोर्ड',
详情：'विवरण',
电子商务：“电子-वाणिज्य',
名单：'सूची',
页面：'पृष्ठहरु',
个人资料：'प्रोफाइल',
项目：'प्रोजेक्टहरू',
“选择语言”：भाषा छनोट गर्नुस',
背景：'सेटिंग्स',
}
}
})

接下来，这里是作为Vue路由器实例实现的导航项。请注意，我没有为每条路线包含

组件

属性，但您需要在自己的应用程序中这样做。还要注意，对于

图标

属性，我使用了Vuetify中内置的

const路由器=新的VueRouter({
路线：[
{
名称：“仪表板”，
路径：'/dashboard'，
元：{
图标：“mdi视图仪表板”，
},
儿童：[
{
名称：'分析'，
路径：'/analytics'，
元：{
图标：“mdi金融”，
},
},
{
名称：“电子商务”，
路径：'/ecommerce'，
元：{
图标：“mdi存储”，
},
},
],
},
{
名称：'pages'，
路径：'/pages'，
元：{
图标：“mdi书本打开变量”，
},
儿童：[
{
名称：'设置'，
路径：'/settings'，
元：{
图标：“mdi齿轮”，
},
},
{
名称：'项目'，
路径：'/projects'，
元：{
图标：“mdi公文包”，
},
儿童：[
{
名称：'列表'，
路径：'/list'，
元：{
图标：“带项目符号的mdi格式列表”，
}
},
{
名称：'详细信息'，
路径：'/detail/：id'，
元：{
图标：“mdi文件文档”，
}
},
],
},
],
},
{
名称：'profile'，
路径：'/profile'，
元：{
图标：“mdi帐户圈”，
},
},
],
})

要将这些内容合并到应用程序中，您的主Vue实例应实例化如下：

newvue({
vuetify:新的vuetify（），
i18n，
路由器，
渲染：h=>h（应用程序），
}).$mount（“#应用程序”）

最后，这里是我用来生成菜单的模板。我包括了一个语言切换器，所以你可以看到它来回切换。这应该和你所拥有的非常相似

{{$t（'select-language'）}：
{{route.meta.icon}
{{$t（route.name）}
{{route.meta.icon}
{{$t（route.name）}
{{$t（child.name）}
{{child.meta.icon}
{{$t（child.name）}
{{$t（孙子名）}
{{grant.meta.icon}

---

希望这有帮助

谢谢你的回复……会解决的……用尼泊尔语说的很好……：）

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;