Cannot read property 'dark' of undefined
Closed this issue · 11 comments
I am dynamically generating a vue component and mounting it to the DOM, using the code:
var extStudent = Vue.extend(Student);
var newStudent = new extStudent({
propsData:{student:student, monthlyClassAverages:monthlyAverages}
});
var docID:string = '#element' + student.classroomRow+"-"+student.classroomColumn;
newStudent.$mount(docID);
In the component, if I add a v-dialog, I get the error
[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"
found in
--->
....
For some reason it is not working, even though if I set the v-model to true on the dialog it appears (and then I get a different error)
Is there something I need to declare in the student component that I am missing?
Thanks,
B
Hi,
I have the same kind of issue since i migrated my project from 1.5 to vuetify 2.0.1. Before migration, it's worked like a charm.
VDialog is extended from ThemeProvider, which cause this problem. And add the dialog to body would make some css fail to take effect.
Please check is new version works correctly
npm i vuetify-confirm@next
and note, in vuetify2 you need to put vuetify instance to config
const vuetify = new Vuetify(...)
....
Vue.use(VuetifyDialog, { vuetify })
In nuxt ->
plugins/dialog.js
import Vue from 'vue'
import VuetifyConfirm from 'vuetify-confirm'
export default ({ app }) => {
Vue.use(VuetifyConfirm, { vuetify: app.vuetify })
}
I guess I should have given more details. I am using Vue 2.6, and typescript.
vuetify.ts is as follows:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import '@mdi/font/css/materialdesignicons.css';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi',
},
theme:{
dark:false
}
});
and main.ts:
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import vuetify from './plugins/vuetify';
// @ts-ignore
import underscore from 'underscore';
import moment from 'moment';
Vue.config.productionTip = false
Vue.use(underscore);
new Vue({
store,
vuetify,
render: h => h(App)
}).$mount('#app')
Still not quite sure what I am missing, but it did definitely work using plain javascript, so perhaps I will go back to that...
@mantisory
in main.ts:
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import vuetify from './plugins/vuetify';
import VuetifyConfirm form 'vuetify-confirm';
// @ts-ignore
import underscore from 'underscore';
import moment from 'moment';
Vue.config.productionTip = false
Vue.use(underscore);
Vue.use(VuetifyConfirm, { vuetify })
new Vue({
store,
vuetify,
render: h => h(App)
}).$mount('#app')@yariksav Thanks for the update after vuetify 2.
Using the vuetify-confirm@next for now.
Hi @yariksav , someone just asked about your plugin on the vuetify discord, and one of the core dev's replied about 30 seconds later with his fixed version - the codepen he provided was https://codepen.io/anon/pen/MNvPdr?editors=1010.
This was to update the Install function as follows:
``
function createDialogCmp (options) {
const app = document.querySelector('[data-app=true]')
return new Promise(resolve => {
const extended = Vue.extend(Object.assign(Confirm, {
destroyed: (c) => {
app.removeChild(cmp.$el)
resolve(cmp.value)
}
}))
const cmp = new extended({
vuetify
})
Object.assign(cmp, Vue.prototype.$confirm.options || {}, options)
app.appendChild(cmp.$mount().$el)
})
``
I asked why they'd made the data-app change - "adding it to body adds it outside the v-app which makes the styles not apply"
Hi, @mantis! Can you check is version vuetify-confirm@1.0.0-alpha.1 works correctly now? )