Encapsulating the snackbar component of vuetify, "TypeError: Cannot read property'bar' of undefined" appears
The brave goes straight to the answer
The first is the encapsulated vue code
<template>
<v-snackbar v-model="show"
:color="color"
:timeout="timeout"
>
{
{ text }}
<v-btn dark text
@click="show = false">
关闭
</v-btn>
</v-snackbar>
</template>
<script>
export default {
data() {
return {
show: false,
timeout: 3000,
color: "",
text: "",
};
},
methods: {
info(text) {
},
success(text) {
},
error(text) {
},
warning(text) {
},
},
};
</script>
Index.js in the same directory
import Snackbar from './Snackbar.vue'
const Notify = {
}
Notify.install = function (Vue) {
const SnackbarConstructor = Vue.extend(Snackbar)
const instance = new SnackbarConstructor()
let vm = instance.$mount()
document.querySelector('body').appendChild(vm.$el)
Vue.prototype.$notify.info = instance.info;
Vue.prototype.$notify.error = instance.error;
Vue.prototype.$notify.warning = instance.warning;
Vue.prototype.$notify.success = instance.success;
}
export default Notify
Finally, the notification component is introduced in main.js
import Notify from './components/notify'
Vue.use(Notify)
Okay, after the long-winded situation, we
will enter the main line. At this time, the console will appear TypeError: Cannot read property'bar' of undefined
Solution
import Snackbar from './Snackbar.vue'
import Vuetify from 'vuetify/lib'; // <---- add 如果 vuetify 有特殊配置可以引入自定义的文件
const Notify = {
}
Notify.install = function (Vue) {
const SnackbarConstructor = Vue.extend(Snackbar)
const instance = new SnackbarConstructor()
instance.$vuetify = new Vuetify().framework; // <---- add
let vm = instance.$mount()
document.querySelector('body').appendChild(vm.$el)
Vue.prototype.$notify.info = instance.info;
Vue.prototype.$notify.error = instance.error;
Vue.prototype.$notify.warning = instance.warning;
Vue.prototype.$notify.success = instance.success;
}
export default Notify
This is just my humble opinion, if there is any better way to suggest it