loading...

Discussion on: 5 ways of displaying i18n translations in Vue

Collapse
anzelika profile image
Anzelika Author

Though I just realised it's not reactive (if you change locale, it won't refresh the messages. v-text does though, without having to refresh the page. Do you know if there is a way to achieve reactivity with v-t?

Thread Thread
haruanm profile image
Haruan Justino

You will need to re-render the component.
This dirty workarround can be done in some ways listed here:
michaelnthiessen.com/force-re-render/

When I needed to, I used this:

<template>
  <my-component v-if="renderComponent" />
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
  };

and executed the forceRerender on watch for language change.