Vue.js рэндеринг HTML с Vue-тэгом?

Question

[raynhour]

Здравствуйте.

Задача :
- Отрендерить HTML шаблон полученный с API с Vue-тэгами.

Для этого использую асинхронный компонент в которого закидываю параметр

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 }}
Естественно как результат я получаю простую строку с тэгами. Решил попробовать через v-html , но {{ temp.name }} осталась строкой.

Результат которого я ожидаю : Hello World

Прошу помочь в этом вопросе ибо гуглю уже довольно много.

Comments

[Сергей delphinpro]

Решил попробовать через v-html , но {{ temp.name }} осталась строкой.

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

<div v-html="temp.name"></div>

[raynhour]

Сергей, если temp.html = ' {{ name }} ' и temp.name=''hello world" , то через v-html="temp.html" результат будет :

<div>
    <h2>{{ name }} </h2>
</div>

Мне же нужно

<div>
    <h2> Hello World </h2>
</div>

Answer 1

[0xD34F]

Можно использовать Vue.compile для компиляции шаблона, и определить собственную render-функцию, которая будет использовать результат компиляции. Как-то так.

Comments

[raynhour]

Спасибо, именно то что нужно)