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

There is scenario where there is right drawer in which grade dropdown with list grade1, grade2, grade3 etc is been displayed and on all pages I need v-alert notification strip to display total count of student. So, for example from right drawer if I select grade3 then on v-alert strip total student of grade 3 will be displayed. If I change the dropdown value in right drawer to grade1 then total number of student for grade 1 will be reflected on v-alert on all pages.

NOTE - v-alert strip should be displayed on all pages just like navbar.

How can I achieve this?

Should I use stores for this?

CodePudding user response：

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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" >
      <v-alert border="left" color="indigo" dark>
        Count : {{ studentCount }}
      </v-alert>
      <child @student-count="getStudentCount"></child>
    </v-card>
  </v-app>
</div>