I'm trying to create SnackBarComponent.vue so I can implement it in my BaseTemplate.vue where I have my main menu that references the other router-view components.
This would be my BaseComponent.Vue
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
clipped
>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
:to="item.to"
:active-class="`primary white--text`"
link
>
<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>
<v-app-bar
app
clipped-left
color="blue"
dark
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
</v-app-bar>
<v-main>
<v-container fluid style="padding:30px">
<transition name="component-fade" mode="out-in">
<router-view></router-view>
</transition>
</v-container>
</v-main>
<template>
<v-snackbar
v-model="snackbar"
:timeout="timeoutSnackBar"
>
{{ textSnackBar }}
</v-snackbar>
</template>
</v-app>
</template>
<script>
export default {
data: () => ({
snackbar: false,
timeoutSnackBar: -1,
textSnackBar: '',
methods:{
SnackNotification(time,text){
this.snackbar = true
this.timeoutSnackBar: time
this.textSnackBar: text
}
}
drawer: null,
items: [
{
title: "Home",
icon: "mdi-view-dashboard",
to: "/"
},
{
title: "Users",
icon: "mdi-account",
to: "/users"
},
]
}),
}
</script>
and i try use in de UserComponent.vue
<template>
<v-card
class="mx-auto"
max-width="344"
outlined
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">
OVERLINE
</div>
<v-list-item-title class="headline mb-1">
Headline 5
</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn
outlined
rounded
text
>
Button
</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
created() {
this.users();
},
methods: {
users: function() {
axios
.get('/api/users')
.then(response => {
this.users = response.data.data
})
.catch(error => {
this.errored = true
})
.finally(() => {
if (this.firstLoad) this.firstLoad = false
this.loading = false;
this.SnackNotification(2000,'Hi, im a notification')
})
},
}
</script>
My app.js is this.
import App from './components/BaseTemplate.vue'
const app = new Vue({
el: '#app',
render: h => h(App),
vuetify: new Vuetify(),
router
})
had the idea to do it this way but I think I am quite wrong to do this global implementation, I looked for some options but they used NuxtJS and it was not really what I had in mind, any recommendation that could give me how to do it? thank you.
You could add the snack bar in vue.app as global snackbar with vuex.
Example:
App.vue
<template>
<v-app>
...
<v-main>
<router-view />
</v-main>
...
<v-snackbar v-model="snackbar.active" :timeout="-1" :color="snackbar.color">
{{ snackbar.message}}
<template v-slot:action="{ attrs }">
<v-btn text v-bind="attrs" #click="snackbar.active = false">
Close
</v-btn>
</template>
</v-snackbar>
</v-app>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "App",
computed: {
...mapState(["snackbar"])
}
};
</script>
Index.js (store)
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
snackbar: { active: false, color: "", message: "" }
},
mutations: {
SET_SNACKBAR(state, snackbar) {
state.snackbar = snackbar;
}
},
actions: {
snackBar({ commit }, message) {
commit("SET_SNACKBAR", {
active: true,
color: "success", // You can create another actions for diferent color.
message: message
});
}
}
});
Now in any router view you can active the snackbar like this
Example.vue
<template>
...
<v-btn #click="showSnackBar()">
Show SnackBar!
</v-btn>
...
</template>
<script>
import { mapActions} from "vuex";
export default {
methods: {
...mapActions(["snackBar"]),
showSnackBar() {
this.snackBar("Hi, I'm snackbar");
}
}
};
</script>
Please see my answer here for a very similar problem. In that case, they wanted a global 'confirm dialog' but in your case it's a 'global snackbar'
The code that I posted in that answer can be used for a snackbar instead of a dialog with very minimal modification. In fact, in my projects I usually go ahead and add both because they're so useful.
Related
Everything was fine yesterday. Everything was clearly displayed. But today nothing is displayed. And it does not give any errors. Just some miracles. When will firebase stop buggy
<template>
<div class="admin">
<h1> Hi, {{ userProfile.name }} </h1>
<v-row>
<v-col md="4" v-for="(user, index) in users" :key="user.id">
<v-card>
<v-img
v-if="user.image"
height="250"
:src="user.image"
lazy-src="https://via.placeholder.com/250"
>
</v-img>
<v-card-title> {{ user.name }} </v-card-title>
<v-card-text>
<p class="subtitle-1">Email: {{ user.email }}</p>
<p class="subtitle-1">Phone: {{ user.phone }}</p>
<p>{{ user.description }}</p>
</v-card-text>
<v-card-actions>
<Contacts :user="user" :index="index" />
<v-btn color="red">Delete</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>
SCRIPT
<script>
import { mapState } from 'vuex'
import Contacts from '../views/Contacts.vue'
import { auth, storage, adminPanel } from '../firebase'
export default {
components: {
Contacts
},
data() {
return {
users: []
}
},
computed: {
...mapState(['userProfile'])
},
methods: {
async getUsers() {
try {
const querySnapshot = await adminPanel.where('userId', '==', auth.currentUser.uid).get()
querySnapshot.forEach( async (doc) => {
let img = ''
if(doc.data().image) {
img = await storage.ref().child(doc.data().image).getDownloadURL()
}
this.users.push({
id: doc.id,
name: doc.data().name,
email: doc.data().email,
phone: doc.data().description,
image: img,
img: doc.data().image
})
} )
} catch(e) {
console.log(e)
}
}
},
async mounted() {
await this.getUsers()
}
}
</script>
Are these firebase glitches? If so, how to get rid of them give advice? What should I do? how to make it work back?
I want to send a 'template' prop to a component then render it. If I send a plain HTML it works, but if I send a Vuetify tag like <v-btn>test</v-btn> the template does not get compiled.
I know i shouldn't pass a template via props, but this is a specific case: The parent component works as a "template builder" and the child components works as the "result viewer", so I have to pass the created template to the child so that it can compile and show it.
Here's what I've been trying:
main.js
import Vue from 'vue'
import App from './App.vue'
// Some imports here ...
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
<script>
import Vue from 'vue'
// eslint-disable-next-line
var staticRenderFns = [];
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.templateRender) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return this.templateRender();
}
},
watch: {
// Every time the template prop changes, I recompile it to update the DOM
template:{
immediate: true, // makes the watcher fire on first render, too.
handler() {
var res = Vue.compile(this.template);
this.templateRender = res.render;
// staticRenderFns belong into $options,
// appearantly
this.$options.staticRenderFns = []
// clean the cache of static elements
// this is a cache with the results from the staticRenderFns
this._staticTrees = []
// Fill it with the new staticRenderFns
for (var i in res.staticRenderFns) {
//staticRenderFns.push(res.staticRenderFns[i]);
this.$options.staticRenderFns.push(res.staticRenderFns[i])
}
}
}
},
}
export default {
name: 'App',
data: () => ({
template:`
<v-row>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
</v-row>
`,
}),
components:{
dynamic,
},
};
</script>
<template>
<v-app id="app" style="padding-top: 64px;">
<v-app-bar
app
color="blue"
>
<v-btn depressed color="white" class="black--text" click="addBtn">Button</v-btn>
</v-app-bar>
<dynamic :template='template'></dynamic>
</v-app>
</template>
Inside the dynamic component try to render a vue component using the passed template :
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.template) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return h(Vue.component('dynamic-render', {template:this.template}));
}
},
}
Full Example
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.template) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return h(Vue.component('dynamic-render', {
template: this.template
}));
}
},
}
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
count: 1,
template: `
<v-row>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
</v-row>
`,
}),
components: {
dynamic,
},
methods: {
changeContent() {
this.count = this.count + 1
this.template = '';
setTimeout(() => { //simulate loading status
this.template = `<v-col>
<v-btn class="pa-2 primary white--text">Btn ${this.count}</v-btn>
</v-col>`
}, 2000);
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn depressed color="primary" class="black--text" #click="changeContent">change content</v-btn>
<dynamic :template='template'></dynamic>
</v-app>
</div>
how to pass variable between to vue file ?
Hello, this is my file SendCode.vue has variable NewEmail which I want to use it in another file changePass.vue .
Is there anyway to sole this ?
Can someone help me ? Thanks
<template>
<v-app id="inspire">
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="4">
<v-card class="elevation-12">
<v-toolbar color="#ff8c00">
<v-toolbar-title>Glömt lösenord!</v-toolbar-title>
</v-toolbar>
<v-card-text>
Skrive ditt email.
<v-form>
<v-text-field v-model="email"
:error-messages="emailErrors"
label="E-mail"
required
#input="$v.email.$touch()"
#blur="$v.email.$touch()"></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn #click="getCode" color="primary">Skicka koden</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
import axios from 'axios'
import router from '#/router.js'
import { validationMixin } from 'vuelidate'
import { required, email } from 'vuelidate/lib/validators'
export default {
mixins: [validationMixin],
validations: {
email: { required, email },
checkbox: {
checked(val) {
return val
}
}
},
props: {
source: String,
},
data: () => ({
email: ""
}),
methods: {
getCode: async function() {
let obj = {
"email": this.email,
};
let NewEmail = this.email;
let response = await this.$store.dispatch("getCode", obj);
//console.log(email)
//console.log(this.email)
if (response.status == 200) {
setTimeout(function() {
router.push({
path: 'ChangePass'
});
}, 500);
}
}
}
}
</script>
I want to use/pass variable NewEmail in this file from SendCode.vue file
I am new in vue and javascript so I do not know how to do this.
<template>
<v-app id="inspire">
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="4">
<v-card class="elevation-12">
<v-toolbar color="#ff8c00">
<v-toolbar-title>ÄNDRA LÖSENORDET</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field :error="pass1Error" label="Koden" v-model="code1" type="password" />
<v-text-field :error="pass2Error" label="Lössenord" v-model="newPassword" type="password" />
<v-text-field :error="pass1Error" label="Samma Lössenord" v-model="rePassword" type="password" />
</v-form>
</v-card-text>
<v-alert v-if="passError" type="error">
password are not same
</v-alert>
<v-alert v-if="passwordChanged" type="success">
Password has been updated!
</v-alert>
<v-card-actions>
<v-spacer />
<v-btn #click="change" color="primary">Ändra</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
import axios from 'axios'
import SendCode from "#/views/SendCode.vue";
import { validationMixin } from 'vuelidate'
import { required, email } from 'vuelidate/lib/validators'
export default {
mixins: [validationMixin],
validations: {
email: { required, email },
checkbox: {
checked(val) {
return val
}
}
},
props: {
source: String,
},
data: () => ({
code1: "",
newPassword: "",
rePassword: ""
}),
methods: {
change: async function() {
let obj = {
"code1": this.code1,
"newPassword": this.newPassword,
"rePassword": this.rePassword,
};
console.log(obj)
let response = await this.$store.dispatch("changePass", obj);
}
}
}
</script>
We recommend that you use Vuex (State management) for easy transfer and management of data through pages
Documentation:
https://vuex.vuejs.org/
If its only a variable with some value in it you can store it in localstorage i assume.
So in your function where you have the data you want to pass add:
localStorage.setItem('email', variable).
This works as a key value pair where email is the key and the variable is the data you want to access.
Then where you want to access the data you can use:
localStorage.getItem('email')
You probably don't want to do what you're trying to do, but would be better off with state management (vuex/pinia/genericVueStore), or, if you want to pass the data between components in the same app (same project), then the main method is $emits and $props. Check Vue documentation to see if that is what you want, which it probably is.
Nevertheless, within a Vue project, you can generally use Node/ES methods. So, the following would be fine, and would fit into the "composables" category if they weren't ".vue" files.
>> file1.vue
<script setup>
const oneData = "this_text"
export {oneData}
...
>> file2.vue
import {oneData} from "#/file1.vue"
console.log(oneData}
This would be an anti-pattern. Just follow the documentation for the standard things people try to accomplish.
I have a component named concepts, with its data and methods.
In another view I have two instance of this component (I'm using vuetify too):
// Index.vue
<template>
<v-card>
<v-toolbar>
<v-toolbar-title>Conceptos</v-toolbar-title>
</v-toolbar>
<v-tabs class="elevation-2" color="primary">
<v-tab>Ordinarios</v-tab>
<v-tab>Extraordinarios</v-tab>
<v-tab-item :key="1">
<concepts :is_extra="false" :key="1"></concepts>
</v-tab-item>
<v-tab-item :key="2">
<concepts :is_extra="true" :key="2"></concepts>
</v-tab-item>
</v-tabs>
</v-card>
</template>
<script>
import concepts from './Concepts.vue'
export default {
components: {
concepts,
},
data() {
return {
}
}
}
</script>
In the concepts component the is_extra property is used as a parameter, In the method created() of the vue instance, the function fetchAll retrieve from API the data correctly, the param is sent with the correct value:
// Concepts.vue
// this works correctly
created() {
const isExtra = this.is_extra //true or false depends of the property value
// GET /concepts?is_extra=true ...or false
this.server
.setParams({ is_extra: isExtra })
.fetchAll()
}
I have a method named upload (to upload a file) where I use this property again, but the value always is false, Always of the first component
...
// Concepts.vue
methods: {
upload() {
const isExtra = this.is_extra // always false
this.server.setParams({is_extra: isExtra}).upload()
}
}
The full Concepts.vue component here:
<template>
<v-data-table
:divider="true"
:headers="headers"
:items="concepts">
<template v-slot:top>
<v-toolbar flat color="white">
<v-spacer></v-spacer>
<template v-if="me.caps.canUploadCsv()">
<v-btn color="secondary" class="mr-2" dark>
Agregar concepto
</v-btn>
<input type="file" class="d-none" id="csv_file" #change="confirm" accept=".csv">
<v-btn #click="selectFile" :loading="uploading" color="green" dark>
<v-icon left>mdi-file-upload</v-icon> Cargar CSV
</v-btn>
</template>
</v-toolbar>
<v-dialog v-model="confirmDialog"
#click:outside="closeConfirm" #keydown="closeConfirm" max-width="320">
<v-card>
<v-card-title>
<span class="headline">Confirmar</span>
</v-card-title>
<v-card-text>
¿Desea continuar con la carga del archivo?
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text #click="closeConfirm">
No
</v-btn>
<v-btn color="primary" dark #click="uploadFile">Si</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<template v-slot:item.description="{ item }">
<span :title="item.description">
{{ item.description.substr(0, 60) }}...
</span>
</template>
<template v-slot:item.amount_formated="{ item }">
$ {{ item.amount_formated }}
</template>
<template v-slot:item.iva_formated="{ item }">
$ {{ item.iva_formated }}
</template>
<template v-slot:item.total_formated="{ item }">
$ {{ item.total_formated }}
</template>
</v-data-table>
</template>
<script>
import { bus } from '../../app'
import User from '../../models/User'
import Concept from '../../models/Concept'
export default {
props: ['is_extra'],
data() {
return {
me: null,
headers: [
{ text: 'Clave', value: 'code' },
{ text: 'Categoría', value: 'category' },
{ text: 'Descripción', value: 'description' },
{ text: 'Unidad', value: 'unity' },
{ text: 'Total', value: 'total_formated', align: 'end' },
],
concepts: [],
model: null,
loaded: false,
inputFile: null,
confirmDialog: false,
uploading: false,
}
},
created() {
this.me = (new User()).getMe()
const params = this.$route.params
this.model = new Concept(params.companyId, params.contractId)
const isExtra = this.is_extra
this.model.server
.setParams({ is_extra: isExtra })
.fetchAll(this.onSuccess)
},
mounted() {
this.inputFile = document.getElementById('csv_file')
console.log('1', this)
},
methods: {
selectFile() {
if (this.uploading) {
return
}
this.inputFile.click()
},
confirm() {
this.confirmDialog = true
},
closeConfirm() {
this.inputFile.value = null
this.confirmDialog = false
},
uploadFile() {
console.log(this)
this.confirmDialog = false
this.uploading = true
const isExtra = this.is_extra
bus.$emit('snackbar', { color: 'info', text: 'Subiendo archivo...' })
this.model.server
.setParams({ is_extra: isExtra })
.upload(null, 'csv', this.inputFile, this.onSuccess)
},
onSuccess(resp) {
if (this.uploading) {
bus.$emit('snackbar', {
color: 'success', text: 'Conceptos actualizados correctamente'
})
}
if (this.inputFile) {
this.inputFile.value = null
}
this.uploading = false
this.concepts = resp.data
},
}
}
</script>
I put a console.log(this) inside of the created and upload methods, when I change the tab (vuetify tabs), in the first case I get:
VueComponent {_uid: 43, _isVue: true, ...} // created(), is_extra=false
VueComponent {_uid: 71, _isVue: true, ...} // created(), is_extra=true
but in the upload method (when upload the file) I get the same instance:
VueComponent {_uid: 43, _isVue: true, ...} // upload() is_extra=false
VueComponent {_uid: 43, _isVue: true, ...} // upload() is_extra=false
I added :key property but it didn't work.
Vue devtools show the two components with its correct data.
Before using vuetify tabs I already had the issue
Can someone help me please?
I am getting this error when I edit one of the text fields (which updates the store):
I've already tried putting #change and v-model on the text fields and that is not proper. Need to find a proper way to mutate the state on an event triggered by the text field(s).
Example:
Profile.vue:
<v-text-field #change="setProfile(profileData)" v-model="profileData.groupName" label="Group Name"></v-text-field>
Here is my code:
Profile.vue:
<v-text-field #change="set" v-model="profileData.groupName" label="Group Name"></v-text-field>
Profile.vue Javascript:
import { mapGetters, mapMutations } from "vuex";
export default {
name: "Profile",
created() {
delete this.profileData;
this.profileData = JSON.parse(JSON.stringify(this.getProfile()));
console.log(this.profileData);
},
data() {
return {
profileData: {
groupName: null,
groupClid: null,
groupContact: null
}
};
},
methods: {
set() {
this.$store.commit("setProfile", this.profileData);
},
...mapGetters(["getProfile"]),
...mapMutations(["setProfile"])
}
}
build.js --> store.js:
const state = {
profile: {
"groupName": "Happy group",
"groupNumber": "9999999999",
"groupContact": "Bob Ross"
}
};
const getters = {
getProfile: (state) => state.profile,
};
const actions = { };
const mutations = {
setProfile: (state, profile) => (state.profile = profile)
};
export default {
state,
getters,
actions,
mutations,
}
Answer:
Remove delete this.profileData from created()
Change the set() to `setData'
Change to Object.assign (shouldn't matter if you use string->parse or Object.assign)
Put one change event on the card, above the text fields. This way, we don't have to duplicate the vue-style event listener.
<template >
<v-container fluid>
<v-layout row wrap fill-height>
<v-flex xs6>
<v-card elevation="10">
<v-card-title primary-title class="pb-0">
<div>
<h3 class="headline mb-0 pb-0">Group Information</h3>
</div>
</v-card-title>
<v-card-text #change="setData">
<v-container fluid>
<v-layout align-center row wrap>
<v-flex xs3>
<v-responsive>Group Name:</v-responsive>
</v-flex>
<v-flex xs9>
<v-text-field v-model="profileData.groupName" label="Group Name"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-spacer></v-spacer>
</v-container>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
name: "Profile",
created() {
this.profileData = Object.assign({}, this.getProfile());
},
data() {
return {
profileData: {}
};
},
methods: {
setData() {
this.setProfile(this.getData());
},
getData() {
return Object.assign({}, this.profileData);
},
...mapGetters(["getProfile"]),
...mapMutations(["setProfile"])
}
};
</script>