时间戳

首页 > 解决方案 > Vue FontAwesome 图标在计算上不会改变

javascript - Vue FontAwesome 图标在计算上不会改变

问题描述

我想根据对话属性更改标题图标。

<a class="navbar-item" :title="$t('header.lock')" @click="makePrivate">
    <i class="fas" :class="getLockClass"></i>
</a>

这是在计算属性内部：

isConversationPrivate() {
    return !(Object.keys(this.conversation).length === 0 || this.conversation.user_id === null);
},
getLockClass() {
    console.log(this.isConversationPrivate);
    return this.isConversationPrivate ? 'fa-lock' : 'fa-unlock-alt';
}

所以发生的情况是，当您最初加载页面时，对话是空的，因此控制台日志会打印出来false（不存在的对话）。

Axios 请求通过 ID 获取对话，它被检索（使用 Vuex）并在控制台中getLockClass再次运行打印。true

即使发生了变化，课程也从未申请过。为什么它不起作用？

编辑：

我已经设法在这个例子中重现它：

<html lang="fr">
<body>

<div id="app">
    <a @click="toggle">
        <i class="fas" :class="this.lock ? 'fa-lock':'fa-unlock'"></i>
    </a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<script>

    new Vue({
        el     : '#app',
        data   : {
            lock: true
        },
        methods: {
            toggle() {
                console.log("here");
                this.lock = !this.lock;
            }
        },
    });
</script>

</body>

</html>

标签： javascriptvue.js

解决方案

问题是您使用的是 FontAwesome 库，该库将注释掉<i>元素并将其替换为<svg>. 如果您检查浏览器中的元素，则可以检查这一点。FontAwesome 建议您vue-fontawesome出于该原因和其他原因使用：https ://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

另一种解决方案是将<i>另一个元素（如跨度）包装在内部：

<span v-show="lock"><i class="fas fa-lock"/></span>
<span v-show="!lock"><i class="fas fa-unlock"/></span>

推荐阅读