Cannot read property 'dark' of undefined

[mantisory]

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

[BWCode]

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.

[gwh-cpnet]

VDialog is extended from ThemeProvider, which cause this problem. And add the dialog to body would make some css fail to take effect.

[yariksav]

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 })
}

[mantisory]

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...

[yariksav]

@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')

[MrSunshyne]

@yariksav Thanks for the update after vuetify 2.

Using the vuetify-confirm@next for now.

[mantis]

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"

[yariksav]

Hi, @mantis! Thank you for comment and ideas, I will investigate this.

[yariksav]

Hi, @mantis! Can you check is version vuetify-confirm@1.0.0-alpha.1 works correctly now? )

[mantisory]

That would be awesome, but even the vanilla vuetify dialog box wasn’t working either... B

On Aug 3, 2019, at 11:19 AM, Yaroslav notifications@github.com wrote:

Hi, @mantis! Can you check is version vuetify-dialog@1.0.0-alpha.1 works correctly now? )

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[mantis]

@yariksav yep - it appears to work correctly now - sorry for not responding earlier :)