Snippet of code in my template
<!-- Toggle Switch Button for online/offline status -->
<div v-if="user.role=== 'accountant' || user.role=== 'supervisor'">
<v-chip v-if="onlineStatusValue" color="green" class=" d-flex row-pointer" small dense @click="statusUpdated()">
<v-icon x-small color="green darken-4">mdi-circle-medium</v-icon>
<p class="white--text font-style-paragraph pl-2 pt-1">Online</p>
</v-chip>
<v-chip v-else color="red" class=" d-flex row-pointer" small dense @click="statusUpdated()">
<v-icon x-small color="red darken-4">mdi-circle-medium</v-icon>
<p class="white--text font-style-paragraph pl-2 pt-1">Offline</p>
</v-chip>
</div>
Function responsible for updating the state
methods: {
/**
* This method checks and updates the user's online/offline status
* Socket integration is used within this method
**/
statusUpdated() {
clearTimeout(this.userStatusInterval)
if (this.onlineStatusValue === false) {
if(this.role === 'supervisor'){
window.open("/supervisor-ticketpool");
// this.$router.push("/supervisor-ticketpool")
}
socket.emit("userConnected", this.user._id);
this.userStatusInterval = setTimeout(function () {
EventBus.$emit('user-status-online');
}, 1000);
}
else{
if(this.role === 'supervisor'){
this.$router.push("/");
}
socket.emit("userDisconnected", this.user._id);
}
/* ----> Updates the online Status */
this.$store.commit("auth/setOnlineStatus", !this.onlineStatusValue);
},
}
The current method successfully updates the state, however, it only affects the tab that is currently focused. In case of multiple open tabs, any changes made to the state on the active tab will not be reflected on the other tabs which are inactive. I would like all unfocused tabs to also have their this.onlineStatusValue updated whenever there is a change in the state of this.onlineStatusValue on the active tab, ensuring consistency across all tabs.