vue.js - Font-awesome 类不根据 Vue.js 中的条件切换

Question

我只有一个在点击时打开和关闭的元素

<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 时，它以正确的格式显示所有图标（第一个是打开的，其他子项最初是关闭的），但之后没有任何更新。

请注意，item.show 的 true 和 false 值确实会更新

只是为了添加更多信息，问题不在于 Vue.js，因为使用我的自定义类而不是 font-awesome 可以正常工作

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

我在我的 index.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';

我需要更新我的 webpack.js 吗？

标签： vue.jsfont-awesome