В проекте на вью для локализации использую библиотеку 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
), она отрисовывается, как строка.
Делалось по вот этому гайду.
v-html
, если просто в строку с переводом задать код и подстановкой менять. А вот почему первый вариант не работает — вопрос, конечно, интересный.v-html
) Но да, этот вариант, к сожалению, мне не подходит.v-html
стал выходом.