Как рендерить компоненты из data()?

Question

[kr_ilya]

Новичок в vue.
Пытаюсь вставить тэг из data

<v-list-tile
        v-for="(link, i) in links"
        :key="i"
        :to="link.to"
        :active-class="color"
        avatar
        class="v-list-item"
      >
        <v-list-tile-action>
          <icon-base icon-name="write">{{ link.icon }}</icon-base> //вот тут icon вставляется как текст
        </v-list-tile-action>
        <v-list-tile-title
          v-text="link.text"
        />
      </v-list-tile>

В в data()

links: [
      {
        icon: "<icon-write />",

У меня <icon-write />
Вставляется на страницу как текст, как сделать, чтобы он рендерился как тэг?

Answer 1

[Алексей Соболенко]

У тебя link.icon содержит html. Его нужно выводить не в mustashe а в атрибуте v-html.

<v-list-tile-action>
    <icon-base icon-name="write" v-html="link.icon"></icon-base>
</v-list-tile-action>

Comments

[kr_ilya]

Так, разобрался с кодом, v-html работает корректно, но <icon-write /> оказалось именем компонента (исходники)... v-html просто вставляет <icon-write></icon-write>
в код страницы. В норме - должен появится код из компонента.. Как быть? Можно конечно обойтись без цикла и писать множество строк напрямую, тогда и брать данные из data() не придется, но я считаю это не лучший выход из ситуации

Answer 2

[0xD34F]

Надо предварительно компилировать, или хранить не строку, а объект: имя компонента + параметры. Например.