Question

嗨，这是我关于StackOverflow的第一篇文章。

我正在努力动态翻译网站。我正在使用软件包vuejs-localization。如何直接切换语言？

我正在使用最新版本的VueJS和Laravel。

这是我在语言选择器上的代码：

export default {
  name: "LanguageDropDown",
  data() {
    return {
      languages: [
        {
          lang: "fr",
          text: "Français",
          icon: "fr",
        },
        {
          lang: "gb",
          text: "English",
          icon: "gb",
        },
        {
          lang: "us",
          text: "US",
          icon: "us"
        },
      ],
    };
  },
  computed: {
    getCurrentLang: function() {      
      return this.$lang.getLang();
    },
  },
  methods: {
    setLanguage(lang) {
      this.$root.$emit("setLang", lang);
    },
    setLang(lang, index) {
      this.$root.$emit("setLang", this.languages[index].languages[lang], index);
    },
  },
};

这就是我的App.js中的内容：

const app = new Vue({
  el: '#app',
  router,
  data() {
    return {
      lang: 'fr'
    };
  },
  created() {
    this.$lang.setLang( this.lang ); 
  },
  mounted() {
    let _this = this;
    this.$root.$on( 'setLang', function( lang ){      
      _this.lang =  lang ; 
      console.log(_this.lang);
    });
  },
  watch: {
    lang :{
      handler(val){
        this.lang = val;
        console.log('changed to :' + this.lang);
      },
    },
  },
})

我希望通过将变量'fr'更改为'us'或'gb'来进行翻译，但是日志显示lang正在切换，但是什么也没发生...

感谢您的帮助。

Answer 1

要更改语言，您需要致电this.$lang.setLang。您可以在手表中完成

watch: {
    lang :{
      handler(val){
        this.lang = val;
        this.$lang.setLang(val)
        console.log('changed to :' + this.lang);
      },
    },
  },

如何观察和动态设置变量？

1 个答案: