Vue.js 如何创建使用Vue-i18n更改语言的按钮
我有一个导航栏,需要用两个不同的按钮在不同语言之间切换。我使用了Vue CLI和Vue-I18N作为模板语法,但无法在它们之间更改语言。文档中的解决方案对我帮助不大。我的Header.vue、main.js和App.vue如下。我在等你的答案。谢谢 Header.vueVue.js 如何创建使用Vue-i18n更改语言的按钮,vue.js,vue-component,vue-cli-3,vue-i18n,Vue.js,Vue Component,Vue Cli 3,Vue I18n,我有一个导航栏,需要用两个不同的按钮在不同语言之间切换。我使用了Vue CLI和Vue-I18N作为模板语法,但无法在它们之间更改语言。文档中的解决方案对我帮助不大。我的Header.vue、main.js和App.vue如下。我在等你的答案。谢谢 Header.vue <template> <div> <b-navbar toggleable="lg" type="
<template>
<div>
<b-navbar
toggleable="lg"
type="light"
variant="light"
>
<b-navbar-brand href="#">{{ $t('johnDoe') }}</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse
id="nav-collapse"
is-nav
>
<b-navbar-nav>
<b-nav-item href="#">{{ $t('home') }}</b-nav-item>
<b-nav-item href="#">{{ $t('about') }}</b-nav-item>
<b-nav-item href="#">{{ $t('projects') }}</b-nav-item>
<b-nav-item href="#">{{ $t('education') }}</b-nav-item>
<b-nav-item href="#">{{ $t('contact') }}</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-button
size="sm"
class="my-2 my-sm-0 btn-info"
type="submit"
@click="i18n.locale = 'en'"
>{{ $t('english') }}</b-button>
<b-button
size="sm"
class="my-2 my-sm-0"
type="submit"
@click="i18n.locale = 'tr'"
>{{ $t('turkish') }}</b-button>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: 'HelloI18n'
}
</script>
<i18n>
{
"en": {
"johnDoe": "John Doe",
"home": "Home",
"about": "About Me",
"projects": "Projects",
"education": "Education",
"contact": "Contact",
"english": "English",
"turkish": "Turkish"
},
"tr": {
"johnDoe": "John Doe",
"home": "Anasayfa",
"about": "Hakkımda",
"projects": "Projelerim",
"education": "Eğitim",
"contact": "İletişim",
"english": "İngilizce",
"turkish": "Türkçe"
}
}
</i18n>
<style scoped>
</style>
您在“点击事件”按钮中有一个输入错误。i18n可以从带有“$i18n”且没有“i18n”的模板中访问,因此,您的按钮代码必须为:
<b-button
size="sm"
class="my-2 my-sm-0 btn-info"
type="submit"
@click="$i18n.locale = 'en'"
>{{ $t('english') }}</b-button>
{{$t('english')}
import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from "vue";
import './plugins/bootstrap-vue'
import App from "./App.vue";
import i18n from './i18n'
Vue.config.productionTip = false;
new Vue({
i18n,
render: h => h(App)
}).$mount("#app");
<b-button
size="sm"
class="my-2 my-sm-0 btn-info"
type="submit"
@click="$i18n.locale = 'en'"
>{{ $t('english') }}</b-button>