How to integrate html code in a vue class

Question

I'm making a search function that filters some cards I have, so if I start typing elephant then it shows only the elephant card.

So I managed to make it work but I wanted to make it a little better and I want to style a little each card and even use font awesome icons but I can't figure out how to do it.

So in my main html file I'm using v-for and v-bind to get the cards from a js file.

code for a card:

    class Custcard {constructor(header, info, img, sign) {
    this.header = header;
    this.info = info;
    this.img = img;
    this.sign = sign;
  }}




new Custcard(
    'title',
    'info',
    'imgurl',
    'sign,

That works but because each card is a little different, I'm trying to do something Like this:

new Custcard(
'<h1>title</h1>',
'<span class="font awesome icon"></span>info',
'imgurl',
'sign,

Is there a way to achieve that?

Thanks.

Answer 1

I would use the v-html directive.

It would end up looking something like:

<div v-for="(card, idx) in cards" v-bind:key="idx" class="card">
    <div class="card-header" v-html="card.header"></div>
    <div class="card-info" v-html="card.info"></div>
    {{ card.img }}
    {{ card.sign }}
</div>

or something to that affect.

you can find more info about v-html on alligator.io