[Vuejs]-How to set vue-i18n in a component's property reactively

0👍

✅

You could have your API return not only a message but also a code, where the message could be a textual string based on user locale settings, and the code a slug that will always be English, like users.added or project.created. You can store this code in response.code and create a computed property checking this code and returning the correct vue-i18n translation.

export default {
    data() {
      return {
        response: {
          code: "",
          error: ""
        }
      };
    },
    methods: {
      async someMethod() {
        const apiResponse = await sendRequestToAnApi();
        if (apiResponse.code) {
          this.response.code = apiResponse.code;
        } else {
          this.response.code = null
        }
      }
    },
    computed: {
        translatedMessage () {
            if (this.response.code === 'users.added') {
              return this.$t('translate')
            }
            return 'unknown code'
        }
    }
}

Of course you could also make this work with a textual string coming from the API, but personally I like working with a specific code that is independent from language settings.

Leave a comment