Vue 2 html in data object

Question

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>

This is a bad idea to proceed like that IMO but here you go: https://vuejs.org/api/built-in-directives.html#v-html — kissu, Oct 21 '22 at 10:33
A dynamic component is probably better than trying to eval some HTML: https://vuejs.org/guide/built-ins/keep-alive.html#basic-usage — kissu, Oct 21 '22 at 10:34
Otherwise, you can also use this kind of solution if you want any kind of icons: https://stackoverflow.com/a/72055404/8816585 It's written for Nuxt but works for pretty much anything really. — kissu, Oct 21 '22 at 10:35
Yeah its not just specific for icons, but how to pass html.. but thanks :) — R-b-n, Oct 21 '22 at 10:48
We don't have the whole template of your code here but usually, it's a bad idea to pass directly some HTML. Especially if you can make so that it's still handled by Vue and not completely out of control by a random string. Render functions are also a thing, making that more strict: https://vuejs.org/guide/extras/render-function.html#render-functions-jsx — kissu, Oct 21 '22 at 10:50

score 1 · Accepted Answer · answered Oct 26 '22 at 12:52

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>

Vue 2 html in data object

1 Answers1