Блог

Я пытаюсь отобразить некоторые сообщения или ошибки, зависящие от результата асинхронной функции. Когда запрос ответа не включает свойство message, я должен использовать свое собственное. Проблема в том, что когда я использую this.$t("message") внутри someMethod метода response.message (данные), он не реагирует. Так что он не изменится после изменения локали.

 <v-alert v-if="response.error || response.message"
  :type="response.error ? 'error' : 'info'">
  {{response.error ? response.error : response.message}}
</v-alert>

export default {
    data() {
      return {
        response: {
          message: "",
          error: ""
        }
      };
    },
    methods: {
      async someMethod() {
        const apiResponse = await sendRequestToAnApi();
        if (apiResponse.message) {
          this.response.message = apiResponse.message;
        } else {
          this.response.message = this.$t("translation")
        }
      }
    }
}
 

Я предполагаю, что я должен использовать вычисляемое свойство, чтобы заставить его работать, но я понятия не имею, как смешать объект ответа с возможным ответом API.

Любая помощь будет оценена по достоинству

Ваш API может возвращать не только сообщение, но и код, где сообщение может быть текстовой строкой на основе пользовательских настроек локали, а код — фрагментом, который всегда будет английским, например users.added , или project.created . Вы можете сохранить этот код response.code и создать вычисляемое свойство, проверяя этот код и возвращая правильный перевод vue-i18n.

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

Конечно, вы также можете заставить это работать с текстовой строкой, поступающей из API, но лично мне нравится работать с определенным кодом, который не зависит от языковых настроек.