in my code below, i have set a counter to notification in sidebar and i created a component in app.vue to pass the number and counter as well to sidebar … the count number works good and i’m getting number updated whenever a new notification received, but i wanted to set count back to zero when i click on the notification icon but it didn’t work.
below i passed function onReset by using emit but it’s not accessing function and i can’t even see my console.log inside the function
am i doing something wrong here? please help
//app.vue
<template>
<router-view :number="count" @send="getNewCount">
<sidebar :number="count" @reset="onReset" />
</router-view>
</template>
<script>
// @ts-ignore
import sidebar from "@/views/Layout/DashboardLayout.vue";
import axios from "axios";
import {
io
} from "socket.io-client";
let socket = io("h*****.com/");
export default {
components: {
sidebar,
},
data() {
return {
user2: JSON.parse(sessionStorage.getItem("user")),
count: 0,
today: null,
};
},
props: {
number: {
type: Number,
default: 0,
},},
async created() {
console.log(this.count);
const response = await axios.get(
`*******api/${this.user2._id}/`, {
headers: {
Authorization: "Bearer " + sessionStorage.getItem("user"),
},
}
);
socket.emit("user_connected", this.user2.username);
// console.log(this.user2,"userr")
socket.on("verify_connection", (data) => {
this.verify_connection = data;
console.log(data, "s")
});
socket.emit("user_connected", this.user2.username);
socket.on("verify_connection", (data) => {
console.log("heyy", data);
this.verify_connection = data;
});
socket.on("updated_flat", (data) => {
console.log("heyy", data);
this.makeToast(" success ", "'b-toaster-top-center");
});
socket.on("test", (data) => {
console.log("heyy", data);
});
;
},
methods: {
getNewCount(data) {
this.count = data;
},
onReset() { //not working
// api calls, etc.
this.count = 0;
console.log(this.count,"reser")
},
makeToast(variant = null, toaster, append = false) {
this.$bvToast.toast(" edited ", {
title: "BootstrapVue Toast",
variant: variant,
autoHideDelay: 10000,
toaster: toaster,
position: "top-right",
appendToast: append,
});
// this.playSound();
this.count = this.count + 1;
console.log(this.count,"count");
},
},
}
</script>//sidebar.vue
<sidebar-item v-if="roles ==='Admin'"
:link="{
name: ' notification',
path: '/notifications',
icon: 'ni ni-bell-55 text-green'
}">
</sidebar-item>
<p class="notifCount" v-if="roles ==='Admin'" @click="$emit('reset')"> {{ number }} </p> //not working