Класс Font-awesome не переключается в зависимости от условия в Vue. js - PullRequest
Новая
       21

Класс Font-awesome не переключается в зависимости от условия в Vue. js

0 голосов
/ 26 марта 2020

У меня просто есть элемент, который открывается и закрывается при нажатии 

<div class="folderItemHeader" :class="{ bold: isFolder }" @click="toggleChild(item)" :title="item.name">
          <span v-if="isFolder" style="color: Tomato;">
            <!-- LINE 1 <i :class="['fas', item.show ? 'fa-folder-open' : 'fa-folder']" :key="item.show"></i>                -->
            <i class="fas fa-folder-open" v-if="item.show"></i>
            <i class="fas fa-folder" v-if="!item.show"></i>
          </span>
          {{ item.name }} {{ item.show }}
</div>

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

Когда я раскомментирую LINE1, он показывает все значки в правильном формате (первый открыт, другие дочерние элементы изначально закрыты), но после этого ничего не обновляется.

Обратите внимание, что значения true и false для item.show действительно обновляются

Просто для добавления дополнительной информации проблема не в Vue. js, потому что использование моего пользовательского класса вместо font-awesome отлично работает 

<span v-if="isFolder" style="color: Tomato;">
    <i :class="[item.show ? 'showClass' : 'dontShowClass']">My Data</i>
</span>

Я импортирую все в моем индексе. js. 

// "@fortawesome/fontawesome-free": "^5.13.0"
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

Нужно ли обновлять мой веб-пакет. js?

enter image description here

...