Require a v-alert notification to appear on every page, ensuring visibility across the site

Imagine a scenario where there is a right drawer that displays a grade dropdown with options like grade1, grade2, and grade3. On all pages, I need a v-alert notification strip to show the total count of students. For example, if I select grade3 from the right drawer, the total number of grade 3 students will be displayed on the v-alert strip. If I change the dropdown value in the right drawer to grade1, then the total number of grade 1 students will be reflected on the v-alert strip on all pages.

Keep in mind that the v-alert strip should be displayed on all pages just like the navbar.

How can this be accomplished?

Is it necessary to use stores for this functionality?

javascriptvue.js

Answer №1

Not entirely certain about the component structure you're working with, but operating under the assumption that both drawer and v-alert are present on a master page (parent page) with other routes loading inside. If this is accurate, feel free to test out the following solution:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6b68785d2f3365">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2a293928353a251c6e726a726d6f">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04727161706d627d44362a322a3537">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A step-by-step guide on enhancing error message handling for Reactive forms in Angular

Here is a code snippet that I'm working on: public errorMessages; ngOnInit(): void { this.startErrorMessage(); } private startErrorMessage() { this.errorMessages = maxLength: this.translate.instant(' ...

javascriptangulartypescriptformsangular-reactive-forms

Leverage JavaScript to retrieve content and generate an iframe

Can you use JavaScript to extract and insert <div> content from another website into the current site? For example: If Website 1 has a portal and wants to include content from Website 2. Website 2 contains the required content within the <div i ...

javascriptjquery

Immersive image display

Currently on my website, I have a table displaying 9 images with descriptions. I'm looking to enhance user experience by allowing them to click on an image and view it in a larger format like a gallery without disrupting the layout of the page. This ...

javascripthtmlcss

Transforming a class component into a functional component using React for a session

While working on a React application, I encountered the need for auto logout functionality for inactive users. After referring to this resource, I attempted to convert my class component code to functional components. However, I faced issues as the functio ...

javascriptreactjssessionreact-hooksnext.js

Can the ngx-chips library be used to alter the language of chips?

Currently, I am working with the ngx-chips library and encountering a particular issue. Here is an image representation of the problem: https://i.sstatic.net/GL3Fd.png The challenge I am facing involves updating the language of the chips based on the sele ...

javascriptangulartypescriptngx-chips

Module or its corresponding type declarations not found in the specified location.ts(2307)

After creating my own npm package at https://www.npmjs.com/package/leon-theme?activeTab=code, I proceeded to set up a basic create-react-app project at https://github.com/leongaban/test-project. In the src/index.tsx file of my react app, I attempted to im ...

javascripttypescriptnpmnpm-package

Exploring test suite pathways while utilizing ArcGIS JSAPI as an alternative loader within the Intern framework

I have been developing an application using the ArcGIS Javascript API and incorporating tests with Intern. While working on Windows 7 under IIS, I encountered some challenges but managed to overcome them by following the Intern tutorial and referring to so ...

javascriptunit-testingdojoarcgisintern

Adjust the size of an iFrame's content according to the dimensions of the iFrame

I am looking to use an iFrame for embedding a map, and my goal is to resize the map according to the values in the iFrame tag. Most tutorials I have found focus on auto-sizing the iFrame based on content, which is not what I need. Just to make it clear, I ...

javascripthtmliframe

Updating the DOM using jQuery after receiving an AJAX response

I'm grappling with the most effective way to modify the DOM after receiving an AJAX response. I prefer to showcase the code rather than attempt to articulate my dilemma. // page contains several checkboxes $("input[type='checkbox']").live(& ...

javascriptjqueryajaxdom

Angular Pagination: A Detailed Guide

My goal is to paginate 7 results using a custom pagination tag I created: <pagination ng-model="currentPage" total-items="array.length" max-size="maxSize" boundary-links="true"> </paginatio ...

javascriptangularjspagination

Using NodeJS to generate a multipart/mixed response

I am faced with a particular situation: creating a multipart/mixed response in NodeJS with full control over the communication on both ends to avoid interoperability issues. A JSON file containing a list of nodes describing each ZIP file, for example: [{ ...

javascriptjsonnode.jsmultipartform-data

The getStaticProps function in Next.js does not pass any data back to the pages

After setting up my hosted database, I encountered an issue with fetching data from it. Despite confirming that the database is running smoothly through the Swagger app, no data appears when called via API form. import React from 'react'; export ...

javascriptreactjsapinext.jsgetstaticprops

In the Rails environment, it is important to verify that the data sent through $.post method in jQuery is correctly

I’m facing an issue with my jQuery script when trying to post data as shown below: $.post({ $('div#location_select').data('cities-path'), { location_string: $('input#city_name').val() }, }); Although this code work ...

javascriptruby-on-railsajaxcontrollerresponse

Transfer the value of a JavaScript variable to a PHP variable

var javascript_data = $("#ctl00").text(); <?php $php_variable = ?> document.write(javascript_data); <? ; ?> Is there a way to transfer the javascript_data into the php_variable? I'm encountering an issue with this code. Any suggestions? ...

phpjavascript

Get the data in string format and save it as a CSV file

I've coded a script that transforms a JSON object into comma-separated values using the ConvertToCSV function. Now I'm wondering how to save the variable csvData as a downloadable CSV file? The code is already wrapped inside a function triggered ...

javascripthtmljsoncsv

Node JS fails to return body content in POST request

Exploring Node JS for the first time and attempting to post data to a specific URL and retrieve it. Using Postman for this task, but encountering an issue where the response data is coming back as undefined despite receiving a 200 status code. Even after ...

javascriptnode.jsexpresspostpostman

The output varies with each reload even though the function remains constant

Essentially, my webpage functions as an online store where the content is dynamically generated using PHP shortcodes. Here is an example of how it is structured: <?php get_header(); ?> <div id="main-content"> <div id="page-content"> ...

javascriptphpjqueryfunctioneach

Tips for implementing orderBy and filter in ng-repeat when working with an object instead of an array

I am facing a data structure that looks like this: $scope.people = { "ID123": { name_de: "Andre", name_en: "Anrew", age: 30, description: "He is the father of xyz and . . .", . . . ...

javascriptangularjsangularjs-ng-repeat

Encountering a TypeError in Next.js: "Unable to redefine property: $$id" -

Currently, I am immersed in a Next.js tutorial while following a YouTube guide. The project involves creating a mimic of Facebook Threads to enhance my understanding of Next.js. However, when attempting to create a thread (or a simple post), the applicatio ...

javascriptreactjsnext.js

Attempting to showcase data retrieved from various API calls

I am currently facing an issue where I am retrieving stock/share names from my MongoDB database and attempting to display their prices by making API calls for each of them in my component. However, I am only receiving the price for the last stock. Below i ...

mongodbvue.jsaxios