CODEWITHSUNDEEP
vue.js
user1012181
user1012181

Reputation: 8726

Vue data variable not updating after language change

I have a data variable as follows: 

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

The data variable is using localized string. The issue is that, when I change the language from a dropdown, the amount variable is not updating until any other event occurs. I believe this has something to do with the $nextTick().

But not sure how to handle this properly as to have the changes reflected immediately in the amount variable.

I can't make it as a computed property as I've to assign values to this variable at a later point.

like this: 

this.amount.active = true

How can I solve this?

Upvotes: 2

Views: 1491

Answers (1)

Vucko
Vucko

Reputation: 20844

It's hard to tell how you use Vue i18n, but you can use a watcher as it is stated in the docs and watch for the global i18n.locale object, something like:

<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>

Depends how it's configured in your project.

Upvotes: 1

Related Questions