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: vuejs.org/api/built-in-directives.html#v-html — kissu
– kissu, Commented Oct 21, 2022 at 10:33
A dynamic component is probably better than trying to eval some HTML: vuejs.org/guide/built-ins/keep-alive.html#basic-usage — kissu
– kissu, Commented Oct 21, 2022 at 10:34
Otherwise, you can also use this kind of solution if you want any kind of icons: stackoverflow.com/a/72055404/8816585 It's written for Nuxt but works for pretty much anything really. — kissu
– kissu, Commented Oct 21, 2022 at 10:35
Yeah its not just specific for icons, but how to pass html.. but thanks :) — R-b-n
– R-b-n, Commented Oct 21, 2022 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: vuejs.org/guide/extras/… — kissu
– kissu, Commented Oct 21, 2022 at 10:50

kissu · Accepted Answer · 2022-10-26 12:52:29Z

1

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>

answered Oct 26, 2022 at 12:52

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 2 html in data object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related