791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<v-snackbar
|
|
v-model="display"
|
|
:timeout="3000"
|
|
:color="color"
|
|
:multi-line="hasErrors"
|
|
right
|
|
top
|
|
>
|
|
<v-icon class="mr-2">{{ icon }}</v-icon>
|
|
{{ content }}
|
|
|
|
|
|
<ul v-if="hasErrors">
|
|
<li v-for="(allErrors, field) in errors" :key="field">
|
|
{{ field }}
|
|
<ul>
|
|
<li v-for="(error, i) in allErrors" :key="i">
|
|
{{ error }}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- <v-btn text @click="display = false">Close</v-btn> -->
|
|
</v-snackbar>
|
|
</template>
|
|
|
|
<script>
|
|
// https://dev.to/stephannv/how-to-create-a-global-snackbar-using-nuxt-vuetify-and-vuex-1bda
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
display: false,
|
|
color: 'success',
|
|
content: '',
|
|
icon: '',
|
|
errors: {},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$store.subscribe((mutation, state) => {
|
|
if (mutation.type === 'snackbar/showMessage') {
|
|
this.content = state.snackbar.content
|
|
this.color = state.snackbar.color
|
|
this.icon = state.snackbar.icon
|
|
this.errors = state.snackbar.errors
|
|
this.display = true
|
|
}
|
|
})
|
|
},
|
|
computed: {
|
|
hasErrors() {
|
|
return Object.keys(this.errors).length > 0
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|