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

Question

I would like to change header icon based on conversation property.我想根据对话属性更改 header 图标。

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

This is inside computed properties:这是在计算属性内部：

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';
}

So what happens is that when you load the page initially the conversation is empty, so the console log prints out false (non-existing conversation).所以发生的情况是，当您最初加载页面时，对话是空的，所以控制台日志打印出false （不存在的对话）。

Axios request is made to fetch a conversation by ID, it is retrieved (using Vuex) and getLockClass runs again printing true in the console. Axios 请求通过 ID 获取对话，它被检索（使用 Vuex）并再次运行getLockClass在控制台中打印true 。

Even though the change happened, class never applied.即使发生了变化，class 也从未应用过。 Why doesn't it work?为什么它不起作用？

EDIT:编辑：

I have managed to reproduce it on this example:我已经设法在这个例子中重现它：

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

Answer 1

The problem is that your are using a FontAwesome library which will comment out the <i> element and replace it with an <svg> .问题是您正在使用 FontAwesome 库，它将注释掉<i>元素并将其替换为<svg> 。 You can check this if you inspect the element in your browser.如果您检查浏览器中的元素，则可以检查这一点。 FontAwesome recommends that you use vue-fontawesome for that and other reasons: https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs FontAwesome 建议您使用vue-fontawesome出于这个原因和其他原因： https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

Another solution would be to wrap the <i> inside another element (like a span):另一种解决方案是将<i>包装在另一个元素中（如跨度）：

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

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-05-15 18:08:25

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-05-15 18:08:25

解决方案1
3 已采纳 2020-05-15 18:08:25