1

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

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

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

  <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), она отрисовывается, как строка. notification-ugly-link

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

5
  • текстовую информацию лучше прилагать в виде текста: а) читать легче; б) можно копировать; в) поиск работает. исправить текст вопроса можно, нажав править ниже текста вопроса 17 ноя 2021 в 9:00
  • Вы имеете в виду картинки с текстом оповещений? Спасибо, я как-то не расценила их как текст, подумала, что скриншоты нагляднее. Буду знать!
    – Anna
    17 ноя 2021 в 9:04
  • Второй вариант точно можно вывести через директиву v-html, если просто в строку с переводом задать код и подстановкой менять. А вот почему первый вариант не работает — вопрос, конечно, интересный. 17 ноя 2021 в 9:19
  • @VladimirGonchar, спасибо, что напомнили о v-html) Но да, этот вариант, к сожалению, мне не подходит.
    – Anna
    17 ноя 2021 в 9:42
  • @VladimirGonchar, спасибо большое за подсказку! Перечитала ваше сообщение и осознала, что в первый раз немного не так его поняла. Всё-таки v-html стал выходом.
    – Anna
    17 ноя 2021 в 10:43

1 ответ 1

0

Благодаря подсказкам в комментариях к вопросу, нашла решение для своей задачи. Её можно решить, используя не компонент 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.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.