Convert JSON string to HTML


I have an external json file which contains some HTML. For example:

    "cat": "1",
    "catUrl": "this-is-a-url",
    "catSummary": "This is a summary with <a href=\"\">a link</a>"

Notice catSummary has an href in it. But it doesn’t get rendered as a link. Instead it just renders as regular text… (see image below)

I am outputting these objects using a v-for loop. Using the v-html directive doesn’t seem to do anything.
It does work if I do the following for example:

this.$refs.myElement.innerHTML = this.card.catSummary

But I can’t get my head around using it in a v-for loop…
Any idea’s? Thank you!

try to use v-html

  <p>Another thing</p>
  <div v-html="catSummary"> </div>
   <p>Another thing</p>

Well yes, but how does that work in a v-for loop, though?
Say I have this following code, how do I attach the v-html directive to this?

<p v-for="item in card.cardItems">{{ item }}</p>

Apparently it works if I wrap the object like this:

<span v-for="item in card.cardItems">
    <p v-html="item"></p>

Not sure if this is the ideal solution, but it does the trick!


Putting it in the same tag also works. facepalm
<p v-for="item in card.cardItems" v-html="item"></p>

1 Like