Интернационализация с плагином vue-i18n - PullRequest
Новая
       14

Интернационализация с плагином vue-i18n

0 голосов
/ 19 октября 2018

У меня есть приложение, которое я добавил перевод, я хотел бы добавить событие кнопки, чтобы изменить язык на моей домашней странице.

Я использовал этот учебник локализация с vue

и Локализация с помощью vue tutorial

вот что у меня есть: 

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

Вот 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,
});

Я использую этот генератор https://github.com/martinlindhe/laravel-vue-i18n-generator.

Вот как я перевожу текст в vue js 

v-bind:placeholder="$t('Szukaj umiejętności... ')"

Когда я запускаю генератор, все работает как положено, и я могу перевести текст

Как я могу добавить кнопки, чтобы перевести мою страницу?например, нажав на кнопку ENG, переведите страницу на английский язык и, например, нажмите, например, RU перевести страницу на RU,

1 Ответ

0 голосов
/ 19 октября 2018

vuex-i18n выставляет $i18n.set(), поэтому вы должны иметь возможность сделать что-то вроде этого: <button @click="$i18n.set('en')">en</button> в вашем шаблоне.

...