Добавление гиперссылки с href в именованное форматирование I18n vuejs

#json #vue.js #href #vue-i18n

Вопрос:

Я просмотрел документацию vue на этой странице, чтобы узнать, как я могу решить эту проблему: https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting

Я думаю, что у меня все синтаксисы правильные, и я перепробовал множество различных сценариев с кодом ссылки.

Это переведенный на английский файл из моего файла json:

 "link": {
  "text": "Click this {Url} link."
}
 

Это из моего шаблона:

  {{ $t("Message.link.text", { Url: <a href="https://www.google.com/" target="_blank">www.google.com</a> }) }}
 

Это не работает, и оно отображается {{ $t("Message.link.text", { Url: www.google.com }) }} в пользовательском интерфейсе.

Ценю всю помощь, которую я могу получить, заранее спасибо!

Ответ №1:

Вы не можете выводить HTML с интерполяцией ( {{ }} синтаксисом) в Vue. Вы можете использовать v-html для этого, но это опасно (см. Предупреждения в документах).

Вместо этого используйте интерполяцию компонентов:

 "link": {
  "text": "Click this {url}.",
  "link": "link",
}
 

Шаблон:

   <i18n path="Message.link.text" tag="p">
    <template v-slot:url>
      <a href="https://www.google.com/" target="_blank">{{ $t('Message.link.link') }}</a>
    </template>
  </i18n>