Vuejs - рендеринг необработанных HTML-ссылок на

Question

Я новичок в VueJS и провожу странные эксперименты.Я создаю бэкэнд-сервис, используя python / flask, и этот бэкэнд предоставляет мне строку html-кода со многими тегами внутри, я хочу сделать это внутри моего приложения Vue, у меня есть метод для вызова бэкэнда, который выглядит следующим образом:

async execute (method, resource, data) {
    return client({
      method,
      url: resource,
      data: data
    }).then(async req => {
      return req.data.html
    })
  },
  callBack (id) {
    console.log(id)
    return this.execute('post', '/content/', {body: { 'id': id }})
  }

И в файле .vue у меня есть:

export default {
  data () {
    return {
      loading: false,
      launch: [],
      html: 'none',
      page: this.$route.params.article
    }
  },
  beforeMount () {
    console.log('beforeee')
    this.html = api.callBack(this.page)
  },
  methods: {
    async launch () {
      this.launch = ''
      this.html = await api.callBack(this.page)
    }
  }
}

, поэтому, когда я вызываю функцию запуска, она заполняет this.html, и эта переменная html живет в v-html. Кажется, всечтобы работать, я получаю HTML и отображаю его в контейнере, но ссылки не работают, ссылки должны указывать на одно и то же приложение, что-то вроде # / test / linkvalue, но так как они являются тегами, и vue вы должны использовать, они не 'не работает.

Есть способ достичь этого "динамического маршрута" или я делаю что-то слишком странное?Ссылок много, так как они выскребаны из Интернета, поэтому анализ вручную невозможен.

JSFiddle

Заранее благодарен за помощь

Answer 1

Кроме того, вы не должны возвращать необработанный HTML.Просто верните пути для маршрутов, а затем зациклите пути и создайте ссылки таким образом.

Вы можете использовать директиву v-html vue для вывода необработанного html.

https://jsfiddle.net/eywraw8t/66262/

new Vue({
  el: "#app",
  data: {
    rawhtml: "<h1 style='color: red;'>Hi, I am raw html.</h1>"
  },
  methods: {    
  }
})


<div id="app">
  <div v-html="rawhtml"></div>
</div>