Vue + vue-i18n: ссылка в переводимом тексте

Question

В проекте на вью для локализации использую библиотеку vue-i18n. Подскажите, пожалуйста, как мне сделать так, чтобы ссылка в тексте оповещения отрисовывалась как элемент и это была рабочая ссылка при условии, что path не постоянен (динамически меняется, notification берётся из состояния).

Если не биндить path и просто руками вписать туда ключ от конкретной строки (path="errorY"), например, то работает: ссылка отрисовывается и кликается. Но это мне не подходит. И в некоторых оповещениях мне нужна ссылка, а в некоторых нет.

Ниже мой текущий код. Так вместо ссылки ничего не отрисовывается вообще (см. картинку, элемента ссылки там тоже нет).

  <i18n :path="notification.text" tag="p" class="text">
    <template #link>
      <a href="https://my.link" target="_blank">{{ $t('linkText') }}</a>
    </template>
  </i18n>

В файле со строками:

"errorX": "Server side error! Error code: {error}.",
"errorY": "Failed to connect! Follow these {link}. Error code: {error}."
"linkText": "instructions"

Где-то в коде, где обрабатывается ошибка:

catch (error) {
  this.$store.dispatch("notify", {
    type: "error",
    text: this.$t("errorY", { error })
  });
}

Если ссылку передавать здесь (т.е. так же, как error), она отрисовывается, как строка.

Делалось по вот этому гайду.

Answer 1

Благодаря подсказкам в комментариях к вопросу, нашла решение для своей задачи. Её можно решить, используя не компонент i18n и слоты, а с помощью обычных элементов и директивы v-html. Т.к. в моём случае используются только "свои" строки, а не что-то предоставляемое пользователем или откуда-то ещё извне, это безопасно.

<p class="text" v-html="$t(notification.text)"></p>

Код ссылки теперь находится в строке, а код в блоке обработки ошибки остался неизменным.

"errorY": "Failed to connect! Follow these <a href='https://my.link' target='_blank' rel='noreferrer'>instructions</a>. Error code: {error}."

Кроме того, нашёлся пример в гайде по библиотеке vue-i18n, где приводится такое же решение. Но автор опять же указывает: Only use HTML interpolation on trusted content and never on user-provided content.

БЛОГ НА HUSL

Vue + vue-i18n: ссылка в переводимом тексте

Ответы (1 шт):