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.

tony19 · Accepted Answer · 2022-04-27 03:44:01Z

4

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

edited Apr 27, 2022 at 3:44

answered Apr 27, 2022 at 3:34

tony19

140k23 gold badges281 silver badges354 bronze badges

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

1 Comment

Christopher Mellor Over a year ago

lol, woof. of course. This is how you know you've been coding for too long and need to take a break. thank you for the answer.

Collectives™ on Stack Overflow

Dynamically render a bootstrap element in a template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related