[英]Internationalization with vue-i18n plugin
I have app which I have added translation , I would like to add button event to change the language on my home page . 我有添加了翻译的应用程序,我想添加按钮事件以更改主页上的语言。
I have used this tutorial localization with vue 我已将本教程本地化与vue一起使用
and Localization with vue tutorial 和vue本地化教程
here is what I have : 这是我所拥有的:
<div class="lang-choice">
<span class="lang">PL</span>
<img class="angle-down" src="http://localhost:8080/assets/img/yellow_angle_down.png" alt="">
<div class="lang-dropdown" style="display: block; opacity: 1;">
<ul class="lang-list">
<li><a href="">RU</a>
</li>
<li><a href="">UA</a></li>
<li><a href="">EN</a>
</li>
</ul>
</div>
</div>
Here is app.js 这是app.js
import store from './store/store.js'
// Translation plugin for static text
import vuexI18n from 'vuex-i18n';
import Locales from './vue-i18n-locales.generated.js';
window.Vue = require('vue');
// language settings
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', Locales.en);
Vue.i18n.add('pl', Locales.pl);
Vue.i18n.add('uk', Locales.uk);
// set the start locale to use
Vue.i18n.set('pl');
const app = new Vue({
el: '#app',
store,
});
I am using this generator https://github.com/martinlindhe/laravel-vue-i18n-generator . 我正在使用此生成器https://github.com/martinlindhe/laravel-vue-i18n-generator 。
Here is how I transalte text in vue js 这是我在vue js中转换文本的方式
v-bind:placeholder="$t('Szukaj umiejętności... ')"
When i run generator everything works as expected and I can transalte text 当我运行生成器时,一切都按预期工作,我可以转换文本
How can I add buttons to transalate my page ? 如何添加按钮来翻译我的页面? eg clicking on ENG button transalte the page to english and clicking eg RU translate page to RU ,
例如,点击ENG按钮将页面翻译成英语,然后点击RU转换页面为RU,
vuex-i18n
公开了$i18n.set()
,因此您应该能够执行以下操作:在模板中<button @click="$i18n.set('en')">en</button>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.