Vue 2 html in data object

I tried backticks + signs, everything and I can’t parse the HTML in my data object to the template.

Check the screenshot for the issue.

<script>
export default {
  name: 'Navigation',
  data() {
    return {
     paths: [
      {
        id: 1,
        title: ' +  <b-icon icon="house"></b-icon> +',
        url: '/'
      },
      {
        id: 2,
        title: 'Binding',
        url: 'binding'
      },
    }
  }
}
<script>

Answer

OP solved the issue by using the following

<nav>
  <router-link v-for="path in paths" :to="path.url">
    <span>
      <b-icon 
        icon="house" 
        v-if="path.url === '/'"
      ></b-icon>
      {{ path.title }}
    </span>
  </router-link>
</nav>

Advertisement

Answer