Vuetify: Modal is not closing on clicking outside

[prakash-chokalingam]

The below error throws when I use modal,v0.8.10
Uncaught TypeError: Cannot read property 'addEventListener' of null
at HTMLDocument.eval (eval at (app.js:956), :1619:43)
In the code
document.querySelector('[data-app]').addEventListener('click', click, false)

document.querySelector('[data-app]') returns null.

[johnleider]

You must wrap your app in a v-app component.

[johnleider]

Did this solve your issue?

[greensk]

I have the same problem when use v-modal inside Nuxt application. There is no App component in Nuxt.

[johnleider]

You must use v-app to wrap your application. Vuetify uses this to hook in for its click-outside directive.

[camhart]

@johnleider You'd think that should be mentioned at https://vuetifyjs.com/quick-start.

[johnleider]

Sure thing boss, right on it.

[bjendyk]

@johnleider I wrapped up my code in <v-app> and got rid of "addEventListener" errors, but now the modals stopped working :( I open and close the modals programmatically using v-model variable set either to true or false.

I have a button in my component:

<v-btn v-on:click.native="openCategoryModal('main')">...</v-btn>

That calls the component's method:

openCategoryModal: function (categoryType, item) {
        // some preparation code

        this.categoryModal = true // this statement does not open the modal anymore
}

Modal markup:

<v-modal v-model="categoryModal">
      <v-card>
        <div class="modal-body">
          <!-- modal body goes here -->
          <v-card-row actions>
            <v-spacer></v-spacer>
            <v-btn flat v-on:click.native="categoryModal = false" class="primary--text">Cancel</v-btn>
            <v-btn flat v-on:click.native="submitCategory" class="primary--text">OK</v-btn>
          </v-card-row>
        </div>
      </v-card>
    </v-modal>

Everything is stored inside single .vue file. What am I doing wrong? I'm using v.0.9.4

[johnleider]

When you do not use the activator slot, you must stop propagation of your clicks in order to prevent the modal from immediately closing.

[bjendyk]

Thank you @johnleider, it worked like a charm! :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord