How to render components from data()?

Question

Vue.js

New to vue.
I'm trying to insert a tag from 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>

In to data()

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

I have <icon-write />
Inserted into the page as text, how do I make it render as a tag?

Answer 1

You link.iconhave html. It should be displayed not in mustashe but in the v-html.

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