Vuetify: Drawer not opening and closing properly

[matheusgrieger]

Steps to reproduce

1. Create a template based on Vuetify Pre-defined template
2. Set responsive and simple data variables for the Navigation Drawer component
3. Add button to open and close drawer
4. Evaluate button behavior on desktop: works as expected
5. Resize window until below md to sm breakpoint (1024px)
6. Reevaluate button behavior on mobile size: overlay shows without corresponding close action, and drawer does not open.

Versions

• Vue: v2.3.4
• Vuetify: v0.12.7
• OS: Windows 10 & Linux Ubuntu
• Browser: Chrome@latest & Chromium@latest

What is expected ?

Navigation drawer should open and close when clicking on menu button, and overlay/backdrop should also close drawer when clicked.

What is actually happening ?

After resizing screen, when on mobile-sized screen, the drawer stops behaving accordingly by not opening when v-model value changes. It only shows an action-less overlay/backdrop.

Reproduction Link

https://codepen.io/matheusgrieger/full/MopOXw/

[mateusbadalotti]

+1, facing this issue too.

[matheusgrieger]

Ok, I found a solution. The documentation doesn't explicitly say it, but the button needs a .stop modifier for it to work.

I figured this out by reading the dev FAQ (which is sadly not available in the main documentation). Found a link to the dev website in issue #785.

[bretonio]

I have the following in my Pug in my attempt to recreate a related pre-made template — dark in this case.

v-toolbar-side-icon(@click.stop='drawer = !drawer')

But the console continues to warn,

vue.js:584 [Vue warn]: Property or method "drawer" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I can get the drawer to appear by moving back to a large but not huge viewport, hitting F5 to refresh the page and then hitting F12 in Google Chrome to approximate a small-screen view.

The drawer does appear in larger full-screen views — F11 — on both Firefox and Chrome but does not respond to clicks on small screens in the Fox.

[matheusgrieger]

According to the message, be sure that you have declared drawer in your component's data, like:

export default {
  data() {
    return {
      drawer: false
    }
  }
}

[bretonio]

«Declare drawer in your components data». Okay will try that.

But I am going to have to embarrass myself with my utter nubosity.

I have read the Vue docs on component declarations
https://vuejs.org/v2/guide/components.html -- or rather registrations. As
well as the docs indicated by the render message
https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Do I add the snippet alongside the «new Vue({» line just above ?

Has no effect.

In my scripts section I have,

block scripts
script(src='https://unpkg.com/vue/dist/vue.js')
script(src='https://unpkg.com/vuetify/dist/vuetify.js')

script.
new Vue({
el: '#app',
data: () => ({
})
})

script.
export default {
data: () => ({
drawer: null
}),
props: {
source: String
}
}

// script.
export default {
data() {
return {
drawer: false
}
}
}

The latter commented out for comparison of the two snippets. Neither works
in that context.

I will look at sone of the other prre-fab templates in the meantime.

Long-winded. Sorry. Thanks for prompt response.

On Thu, Jan 11, 2018 at 5:55 PM, Matheus Grieger [e-mail]
wrote:

According to the message, be sure that you have declared drawer in your
component's data, like:

export default {
data() {
return {
drawer: false
}
}
}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/792#issuecomment-357042866,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATmAq_wZHiINWXjgiwIVavHI3mjwK2yDks5tJmccgaJpZM4N-hF5
.

[matheusgrieger]

Are all your scripts included in an HTML/Pug file? If so, it is not going to work.

JavaScript Modules (the ones with export default), for the time being, are to be used in a module bundler such as Webpack. If you are not using them, then yes, you'll need to declare your drawer in the root instance of your first script.

I recommend you checking out some Vue/Vuetify Webpack templates for better understanding of what I'm talking about.

In the meantime, if you do not intend on using bundlers, simply do not export your objects, instead just register them into Vue.

``` pug
block scripts
script(src='unpkg.com/vue/dist/vue.js')
script(src='unpkg.com/vuetify/dist/vuetify.js')

script.
new Vue({
el: '#app',
data: () => ({
drawer: null
})
})

script.
Vue.component('myComponent', {
data: () => ({
}),
props: {
source: String
}
})

[bretonio]

On the right track! Thanks for the patience and pedagogy.

[bretonio]

I did finally get your gist.

<script>
  export default {
    data () {
      return {
        drawer: false,
        dialog: false
      }
    }
  }
</script>

And now both drawer and dialog are working on my page. Thanks again.

[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