vue.js - 语言更改后 Vue 数据变量不更新

Question

我有一个数据变量如下:

data(){
  return {
    amount: {
      active: false,
      name: this.$i18n.t('key_name'),
      value: this.$i18n.t('key_value')
    }
  }
}

数据变量正在使用本地化字符串。问题是，当我从下拉列表中更改语言时，amount 变量不会更新，直到发生任何其他事件。我相信这与 $nextTick() 有关。

但不确定如何正确处理这个问题，以便让更改立即反射(reflect)在 amount 变量中。

我无法将其作为计算属性，因为我必须在稍后为该变量赋值。

像这样:

this.amount.active = true

我该如何解决这个问题？

Answer 1

很难说出你是如何使用 Vue i18n 的，但你可以使用 watcher正如文档中所述，请注意全局 i18n.locale object ，类似于:

<script>
export default {
  name: 'app',
  data () {
    return {
      amount: {
        active: false,
        name: this.$i18n.t('key_name'),
        value: this.$i18n.t('key_value')
      }
    }
  },
  watch: {
    this.$i18n.locale (val) {
      this.amount.active = true
    }
  }
}
</script>

取决于它在您的项目中的配置方式。