{{#if currentUser}} со значком внутри все еще отображается при выходе пользователя - PullRequest
Новая
       54

{{#if currentUser}} со значком внутри все еще отображается при выходе пользователя

2 голосов
/ 11 марта 2020

Спасибо, что прочитали мое сообщение, вот моя проблема:

Я использую панель навигации, созданную с помощью Bulma, в которой я отображаю либо кнопки входа / регистрации, либо значок профиля в FontAwesome, используя {{# # if currentUser}}, как показано ниже («S'inscrire» и «Se connecter» означает зарегистрироваться и войти на французском языке): 

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

Когда пользователь не вошел в систему, отображаются только кнопки:

enter image description here

И когда он входит в систему, у меня появляется только значок:

enter image description here

Моя проблема в том, что когда пользователь выходит из системы, я получаю значок пользователя и кнопки:

enter image description here

, и если я вхожу и выхожу несколько раз, я получаю несколько значков. Похоже, что это проблема с иконкой FontAwesome, я пробовал с обычным изображением вместо иконки, и он вел себя нормально, но мне нужно использовать значки внутри этого типа оператора в каком-то месте моего приложения.

Заранее спасибо!

1 Ответ

3 голосов
/ 11 марта 2020

Это потому, что шрифт awesome 5 заменяет тег <i> на svg, что нарушит реактивность вашего кода, если он не будет заключен в другой элемент потока. Попробуйте обернуть <i> <span> для поддержания реактивности: 

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

Вы также можете сделать этот короткий шаблон без состояния: 

<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"}}
...