Dynamically render a bootstrap element in a template

Question

I want to dynamically render a bootstrap icon in my template based on the result of a function.

I tried something like this

           <template>
               <div>
                    {{ getUsersEmaillRequestStatus(user.id) === EMAIL_STATUS.SUCCESS ? 
                     `<b-icon icon="check-circle"></b-icon>` 
                      : "something else" }}
               </div>
            </template>

And it just renders everything inside my double curly's.

I also tried to do something like this

<div v-html="emailResultFunction() />

emailResultFunction() {

     return `<b-icon icon="check-circle" style="color: #328dd1" font-scale="4"></b-icon>`
}

and it just doesn't work either. How do can I render an icon dynamically based on the result of a function?

I also tried to use just and svg and i couldn't get that to work either.

Answer 1

Use v-if on the <b-icon> to conditionally render that component:

<template>
  <div>
    <b-icon v-if="getUsersEmaillRequestStatus(user.id) === EMAIL_STATUS.SUCCESS"
            icon="check-circle"></b-icon>

    <div v-else>Something else...</div>
  </div>
</template>

demo