moment locale changes do not affect moment objects

[Tinoooo]

Hi there,

whenever I switch the locale of moment, moment instances are not affected.

here is a small example:

<template>
  <div>
    {{ test }}
    <button @click="$moment.locale('fr')">fr</button>
    <button @click="$moment.locale('en')">en</button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  computed: {
    test() {
      return this.$moment()
        .subtract(1, 'days')
        .from(Date.now());
    }
  }
};
</script>

This is probably expected behavior. But are there any plans to realize dynamic locale changes? Or do you have an idea on how to achieve the desired behavior?

Thanks

[ricardogobbosouza]

@Tinoooo dont recomputed https://github.com/vuejs/vue/issues/214 Try this:

<template>
  <div>
    {{ test }}
    <button @click="change('fr')">fr</button>
    <button @click="change('en')">en</button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data: () => ({
    currentTime: Date.now()
  }),
  methods: {
    change(locale) {
      this.$moment.locale(locale),
      this.currentTime = Date.now();
    }
  },
  computed: {
    test() {
      return this.$moment()
        .subtract(1, 'days')
        .from(this.currentTime)
    }
  }
}
</script>

[Tinoooo]

Thanks @ricardogobbosouza for your idea. I have the feeling, that this would be some kind of a workaround. If, for example this.currentTime is handled and updated somewhere else (like a vuex store to have readable timestamps like "User commented 30 seconds ago" across your app), it feels a bit messy to update it from more than one entity.

[ricardogobbosouza]

This is not a problem of the module, you are not updating a local property so that the computed property will be called, but I understand what you want to do... :thinking:

[ricardogobbosouza]

You can do so too:

<template>
  <div>
    {{ format(Date.now()) }}
    <button @click="$moment.locale('de');$forceUpdate();">fr</button>
    <button @click="$moment.locale('en');$forceUpdate();">en</button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  methods: {
    format(date) {
      return this.$moment().subtract(1, 'days').from(date)
    }
  }
};
</script>

[ricardogobbosouza]

So I guess it's not a problem in the module

[Tinoooo]

Yes it is not a problem with the module. This probably should not be a github issue. Sorry for that. The version with the call of $forceUpdate() is fine for the example, but in a real world situation, $moment is probably used in more than one component. $forceUpdate() does only update the current instance. I think a good solution could be to add the locale to the global store and use it in each computed to make sure, the computed is dependant on the locale. I haven't tested it, but something like this could work maybe:

  ...
  computed: {
    test() {
        return this.$moment().locale(this.locale).subtract(1, 'days').from(Date.now())
    }
  }

Thank you for your help. Since it's not the modules fault, I am closing the issue now.