vuetifyのスナックバーコンポーネントをカプセル化すると、「TypeError：未定義のプロパティ 'bar'を読み取れません」と表示されます
1つ目はカプセル化されたvueコードです
<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
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
最後に、通知コンポーネントがmain.jsに導入されました
import Notify from './components/notify'
Vue.use(Notify)
さて、長蛇の列の状況の後、メインラインに入ります。
このとき、コンソールはTypeErrorと表示されます：undefinedのプロパティ「bar」を読み取ることができません
解決
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
それを提案するより良い方法があれば、これは私の謙虚な意見です