VueJS - использование атрибута v-html не работает

#vue.js

Вопрос:

В моем случае я заменяю ссылку поверх элемента paragraph с помощью v-html

Пожалуйста, найдите фрагмент кода следующим образом

  <p v-html="websiteHTML"></p>

где websiteHTML содержит: <a v-bind:href="google.com/">Google</a>

<p> Тег отображается с помощью Google, но не имеет гиперссылки для перехода https://www.google.com /

Не могли бы вы помочь в поиске ошибки?

1. Я исправил некоторые проблемы с форматированием в вопросе, но есть и другие, которые невозможно восстановить — так что это может быть просто проблема с текстом вопроса: содержит ли websiteHTML просто строку «Google»? Или он содержит что-то вроде <a href="https://google.com">Google</a> ? Если вы не укажете Vue включить ссылку, этого не произойдет.

2. Спасибо Дэниелу за ваш ответ … app.js -> websiteHTML: ‘<v-привязка:href=» Google google.com /»>Google</a >’ index.html -> <p v-html=»websiteHTML»></p>

Ответ №1:

Строка HTML, которую вы включаете в свою переменную, должна быть просто HTML, а не шаблонным кодом Vue. Когда вы пытались включить директивы шаблона vue, фреймворк записал тег привязки в DOM с литеральным атрибутом «v-bind: href» вместо желаемого «href»:

 new Vue({
  el: '#app',
  data: {
    websiteHTMLNo: '<a v-bind:href="https://google.com/">Google</a>', // <-- won't work
    websiteHTMLYes: '<a href="https://google.com/">Google</a>'  // <-- do this instead
  },
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-html="websiteHTMLNo"></p>
  <p v-html="websiteHTMLYes"></p>
</div>

(Если вам действительно нужно ввести шаблонный код вместо обычного HTML, вам нужно использовать Vue.compile вместо v-html для его синтаксического анализа.)

Ответ №2:

если вы хотите передать переменную внутри вашей ссылки.

 const url: string = 'https://google.fr/'
const html: string = `<a href="${url}">Google</a>`

 <p v-html="html"></p>