Tengo este snackbar global en mi carpeta de components, lo que quiero hacer es llamarlo desde cualquier parte de mi proyecto, enviandole el color, mensaje que debe mostrar y la variable bool que lo activara, a través de las variables de props:
<template>
<v-snackbar
class="mt-5"
v-model="snackbarRecibido"
:color="colorRecibido"
top
>
{{ mensajeSnackBarRecibido }}
<template v-slot:action="{ attrs }">
<v-icon right v-bind="attrs" @click="snackbar = snackbarRecibido">
mdi-close
</v-icon>
</template>
</v-snackbar>
</template>
<script>
export default {
name: "SnackBarGeneral",
props: {
snackbarRecibido: {
type: Boolean,
required: true,
},
colorRecibido: {
type: String,
required: false,
default: "success",
},
mensajeSnackBarRecibido: {
type: String,
required: true,
default: "Inicio",
},
},
data() {
return {
mensajeSnackBar: null,
colorsnackbar: null,
snackbar: true,
};
},
methods: {
abrirSnack(mensaje, color) {
this.mensajeSnackBar = mensaje;
this.colorsnackbar = color;
this.snackbar = true;
},
},
};
</script>
me aparece este mensaje de error al intentar decirle al v-model del snackbar que tome el valor de la variable snackbarRecibido:
también he intentado llamarlo definiendo su función de forma global en el main.js:
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import "@babel/polyfill";
import moment from "moment";
import axios from "axios";
import snackgeneral from "./components/SnackBarGeneral.vue";
Vue.prototype.$http = axios;
Vue.prototype.moment = moment;
Vue.prototype.snackgeneral = snackgeneral;
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
moment,
snackgeneral,
render: (h) => h(App),
}).$mount("#app");
pero al intentar llamar a la función abrir snack desde el archivo padre me sale este error:
this.mensajeSnackBar = "Revise todos los campos del formulario";
this.colorSnackBar = "green";
this.snackgeneral.abrirSnack(this.mensajeSnackBar, this.colorSnackBar);
por último he intentado enviar el valor del v-model = snackbar, del SnackBarGeneral.vue,y decirle en el data que snackbar=snackbarRecibido y enviarle de esta manera los datos pero el snackbar no aparece. aqui le envío desde el componente padre.
<SnackBarGeneral
:colorRecibido="colorSnackBar"
:mensajeSnackBarRecibido="mensajeSnackBar"
:snackbarRecibido="snackbar"
refs='refenciasnack'
>
</SnackBarGeneral>