动态渲染模板中的引导元素

发布于 2025-01-24 10:15:33 字数 840 浏览 0 评论 0 原文

我想根据功能的结果在模板中动态渲染一个引导图标。

我尝试了这样的事情

           <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，但也无法正常工作。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不即不离 2025-01-31 10:15:33

使用 v-if ＆lt; b-icon＆gt; 以有条件地渲染该组件：

<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

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

回复收藏 0 原文

~没有更多了~