Vuetify: v-model prop on v-navigation-drawer redundant when enable-resize-watcher on

[daveykane]

Steps to reproduce

1. Create a navigation drawer with prop enable-resize-watcher
2. Try to hide the navigation drawer with v-model="false"

Versions

Vue.js v2.5.2, Vuetify v0.16.9

What is expected ?

If the navigation drawer's visibility is false from the v-model prop it should always be hidden regardless of the enable-resize-watcher.

What is actually happening ?

The navigation is never hidden.

Reproduction Link

https://codepen.io/davidkane/pen/dVBaKK

Comments

Apologies if this is actually intended behaviour but it took me a little while to realise what was happening, it's not clear in the documentation that these props are tied together so exclusively. I had to remove props one by one until I realised it was the enable-resize-watcher causing the issue so I thought I'd raise an bug incase it was not intended and / or someone has a similar issue. It's worth noting, I have gotten around the problem simply by using the same value to control both props. In the Codepen example the fixed v-navigation-drawer definition would be:

<v-navigation-drawer light :enable-resize-watcher="drawer" v-model="drawer">

[Patsky]

Facing the same issue. From what I found It seems that v-model="drawer" doesn't take initial drawer value into consideration. It works fine if you change drawer. Either by tapping a button like in Vuetify documentation examples:

 <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>

Or by changing it in other way - for example:

I am using vuex for the navigation drawer's visibility ie: v-model="$store.state.isDrawerVisible"
and have 2 components
Home - where I set $store.state.isDrawerVisible = false (as I don't want to see the drawer here)
SubPage - where $store.state.isDrawerVisible = true

If I open the site for the first time - and see "Home" - the $store.state.isDrawerVisible = false is ignored, however if I navigate to SubPage and then go back to Home - the navigation drawer is hidden as it should

TL;DR - initial value inv-model is ignored with prop enable-resize-watcher enabled. It will hide if you change the value of v-model later

[Traxo7]

I'm using enable-resize-watcher, clipped, floating and experiencing same issue.

@Patsky wrote:

From what I found It seems that v-model="drawer" doesn't take initial drawer value into consideration.

When I set initial value to false, it actually is false (so the value is not ignored), but something (i.e. enable-resize-watcher) changes it to true later.

The difference between initial value true / false is that false will become true, thus resulting in transition, while if it's set to true initially, there won't be any transition.

[johnleider]

With the upcoming update, this is how model interaction will work:

• If you provide an explicit Boolean value, that value will be the model, period
  
  
  
  • This does not include permanent, which will always be open on desktop regardless of model and cannot be manually changed
  
  
• If you pass a null value to the drawer, it will then attempt to determine the state it should be in based upon:
  
  
  
  • Its type, permanent, temporary or no prop at all (persistent is being removed)
  
  
  • The mobile state of the DOM
  
  

This should produce results that are more expected for the user.

[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