У меня есть приложение, которое я добавил, я хотел бы добавить событие кнопки, чтобы изменить язык на моей домашней странице.
Я использовал эту локализацию учебника с vue
и локализация с помощью учебника vue
вот что у меня есть:
<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,
vuex-i18n
предоставляет $i18n.set()
, поэтому вы можете сделать что-то вроде этого: <button @click="$i18n.set('en')">en</button>
в вашем шаблоне.