Vue.js HTML rendering with Vue tag?

Question

Vue.js

Hello.
Task:
- Render the HTML template received from the API with Vue tags.
To do this, I use an asynchronous component in which I throw a parameter

Vue.component('HeaderBase', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>{{ posts.html }}</div>',
      data: () => ({
        temp: {
          html: '<div></div>',
          name: "Hello World "
        },
      }),
      created () {
        axios.get('http://.../test/1/')
        .then(response => {
          this.temp = response.data
        })
      }
    })
  }, 1000)
})

temp.html = {{ temp.name }}
Naturally, as a result, I get a simple string with tags. I decided to try with v-html , but {{ temp.name }} remained a string.
The result of which I expect: Hello World
Please help me in this matter because I have already googled quite a lot.

Answer 1

You can use Vue.compile to compile the template, and define your own render function that will use the result of the compilation. Somehow so .