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

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