I am seeking a way to dynamically change the header icon based on a conversation property.
<a class="navbar-item" :title="$t('header.lock')" @click="makePrivate">
<i class="fas" :class="getLockClass"></i>
</a>
These are the computed properties in use:
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';
}
Initially, when the page is loaded, the conversation is empty leading to the console log printing false (no existing conversation).
Upon making an Axios request to fetch a conversation by ID, and once it is retrieved and the method getLockClass runs again, the console will now show true. However, despite the change occurring, the class never gets applied. Why does this not work?
UPDATE:
I have replicated the issue in 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>