英文:
Need to displayed notification(v-alert notification) which will be reflecting on all page
问题
有一个情景，在右侧抽屉中有一个包含等级下拉列表的情况，其中显示了grade1、grade2、grade3等等级，所有页面上都需要显示v-alert通知条，显示学生的总数。例如，如果我从右侧抽屉中选择了grade3，那么v-alert通知条上将显示grade 3的总学生数。如果我在右侧抽屉中更改了下拉列表的值为grade1，那么所有页面上的v-alert上将反映出grade 1的学生总数。
注意 - v-alert通知条应该像导航栏一样显示在所有页面上。
我该如何实现这个功能？
我应该使用stores吗？
英文:
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?
答案1
得分: 0
我不确定你的组件结构，但我假设你在主页面（父页面）中同时拥有drawer和v-alert，其他路由在其内加载。如果我的理解是正确的，你可以尝试这个：
<!-- language: lang-html -->
<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>
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
}
}
});
以上是你提供的代码的翻译部分。
英文:
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 :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
}
}
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论