Question

多语种文件夹i18n内容如下：

src lang cn.js us.js index.js

index.js文件的内容如下：

import VueI18n from 'vue-i18n'
import Vue from 'vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'cn',
    messages:{
        'cn': require('./lang/cn'),
        'us': require('./lang/us')
    }
})

export default i18n;

mina.js

import Vue from 'vue'
import App from './App'
import router from './router'
import i18n from './i18n' //import mutil-lang

Vue.config.productionTip = false

var VueCookie = require('vue-cookie');
Vue.use(VueCookie);

new Vue({
  el: '#app',
  router,
  template: '<App />',
  i18n, //import mutil-lang
  components: { App }
})

我想说写模板标签和JS代码，如下所示：

<template>    
    <div class="wrap">
        {{ $t('message.the_world') }}
    </div>
</template>

和

export default {
    name:'dkc-exchange-detail' ,
    data(){
        return {
            showExchangeTypes: false,
            exchangetItems: [
                //this.$t('message.the_world') Want to get the character of the corresponding language
                {id: 1, text: this.$t('message.the_world')},//
                {id: 2, text: this.$t('message.the_world_2')}
            ],                 
        }
    },
}

当我切换多语言方法时：

methods:{        
    choiceLang: function(lang){
        if(lang === this.currentLang)
            return;
        this.currentLang = lang;
        this.showLangSelecor = false;
        this.$cookie.set('lang', this.currentLang.lang, { expires: 7 });        
        window.location.reload();
    },
},

在模板中，多语言语法的行为与预期的一样，但JS语法不是。它注重显示某种语言，问题出在哪里？谢谢！

Answer 1

showLangSelector拼写错误。此外，reload页面将破坏整个vue组件并从头开始重构，因此this.foo = bar以上的reload设置将无效，因为在重新加载的页面中，它们从未发生过，你只有一个全新的vue组件。

Vue-i18n在数据方法中不能正常工作吗？

1 个答案: