[Vuejs]-Need to displayed notification(v-alert notification) which will be reflecting on all page

by

0👍

✅

I am not sure about the component structure you have but I am demoing based on the assumption that you have both drawer and v-alert in a master page (parent page) and other routes are loading inside it. If my understanding is correct. You can give a try to this :

Vue.component('child', {
  data() {
    return {
      items: [
        { title: 'Grade 1', icon: 'mdi-view-dashboard', count: 5 },
        { title: 'Grade 2', icon: 'mdi-view-dashboard', count: 10 },
        { title: 'Grade 3', icon: 'mdi-view-dashboard', count: 15 },
      ],
    }
  },
  template: `<v-navigation-drawer permanent>
              <v-divider></v-divider>
              <v-list dense nav>
                <v-list-item v-for="item in items" :key="item.title" link @click="getStudentCount(item.title)">
                  <v-list-item-icon>
                    <v-icon>{{ item.icon }}</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-navigation-drawer>`,
  methods: {
    getStudentCount(title) {
      this.$emit('student-count', this.items.find(obj => obj.title === title).count)
    }
  }          
});

var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      right: null,
      studentCount: 0
    }
  },
  methods: {
    getStudentCount(e) {
        this.studentCount = e
    }
  }
});
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.13/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.13/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"/>

<div id="app">
  <v-app id="inspire">
    <v-card height="400" width="256" class="mx-auto">
      <v-alert border="left" color="indigo" dark>
        Count : {{ studentCount }}
      </v-alert>
      <child @student-count="getStudentCount"></child>
    </v-card>
  </v-app>
</div>

Leave a comment