当用户注销时，{{#if currentUser}}的内部图标仍然呈现 [英] {{#if currentUser}} with icon inside still rendered when user logs out

问题描述

感谢您阅读我的信息，这是我的问题:

Thank you for reading my message, here is my problem :

我正在使用Bulma制成的导航栏，其中使用{{#if currentUser}}显示来自FontAwesome的登录/注册按钮或个人资料图片图标，如下所示("S'inscrire"和"Se connecter"表示以法语注册和登录):

I'm using a navbar made with Bulma in which I display either login/register buttons or a profile picture icon from FontAwesome using {{#if currentUser}} as shown below ("S'inscrire" and "Se connecter" means register and login in French) :

<div class="navbar-end">
    <div class="navbar-item">
        <div class="buttons">
            {{#if currentUser}}
                <!-- Displayed only when the user is logged in-->
                <i class="fas fa-user icon is-large" id="userProfile"></i>
            {{else}}
                <!-- Displayed when the user is NOT logged in-->
                <a class="button is-primary register">
                    <strong>S'inscrire</strong>
                </a>
                <a class="button is-light login">Se connecter</a>
            {{/if}}
        </div>
    </div>
</div>

当用户未登录时，仅显示按钮:

When the user is not logged in it only show the buttons :

当他登录时，我只有一个图标:

And when he logs in I have only the icon :

我的问题是，当用户注销时，我同时获得了用户图标和按钮:

My problem is that when user logs out, I got both user icon and buttons :

，如果我多次登录和注销，我会得到多个图标.看来这是FontAwesome图标的问题，我尝试使用普通图像而不是图标，并且它的行为正常，但是我需要在我的应用程序的某个位置的此类语句中使用图标.

and if I log in and out multiple times I get multiple icons. Looks like it's a problem with FontAwesome icon, I've tried with a normal image instead of the icon and it behaved normally, but I need to use icons inside this type of statement in some place of my app.

提前谢谢！

推荐答案

这是因为字体真棒5将< i> 标记替换为 svg 您的代码反应性(如果未包装在另一个流元素中).尝试用< span> 包装< i> ，以保持反应性:

This is because font awesome 5 replaces the <i> tag with an svg which will break your code reactivity if it's not wrapped inside another flow element. Try wrapping the <i> with a <span> in order to keep the reactivity going:

<span>
  <i class="fas fa-user icon is-large" id="userProfile"></i>
</span>

您也可以使它成为一个简短的无状态模板:

You could also make this a short stateless template:

<template name="icon">
  <span>
    <i class="fas fa-{{name}} {{#if large}}is-large{{/if}}" id="{{id}}"></i>
  </span>
</template>

并称呼它

{{>icon name="user" large=true id="userProfile"}}

这篇关于当用户注销时，{{#if currentUser}}的内部图标仍然呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！