动态呈现模板中的bootstrap元素

Question

我想根据函数的结果在模板中动态呈现一个引导图标。

我试过这样做

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

它会显示双花括号内的所有内容

我也试过这样做

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

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

也不管用。如何根据函数的结果动态渲染图标?

我也试过使用just和svg，但我也不能让它工作。

Answer 1

在<b-icon>上使用v-if有条件地呈现该组件:

<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>

演示