3

This is a Vue.js project and I am using Vuetify. I have a navigation drawer. At 1263px screen width the resize-watcher kicks in and the drawer closes. I can prevent this using 'permanent'. What I would like it to do is instead of closing the drawer switch to mini.

here is my existing code. 

<v-navigation-drawer 
    clipped 
    :mini-variant="mini"
    v-model="drawer"
    permanent
    app
    hide-overlay
>
    <v-list dense>

        <v-list-tile
        v-for="(item, index) in authorized"
        :key="index"
        @click="sendComponent(item)"
        >

        <v-list-tile-action>
            <v-tooltip right slot="activator">
                <v-icon slot="activator">{{ item.icon }}</v-icon>
                <span>{{ item.title }}</span>
            </v-tooltip>
        </v-list-tile-action>

        <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>

        </v-list-tile>
    </v-list>
</v-navigation-drawer>

https://codepen.io/jsd219/pen/gJJMPQ

Any help is much appreciated

Jason
  • 1,091
  • 4
  • 19
  • 40

1 Answers1

13

Considering your <v-navigation-drawer mini-variant="mini">, from docs:

computed: {
  mini() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return true
      case 'sm': return true
      case 'md': return true
      case 'lg': return false
      case 'xl': return false
  }
}

Note you have the complete structure of the $vuetify.breakpoint object in the docs.
Most likely, you'll want to replace the verbose syntax above (posted mostly for future users, with different use-cases) with:

computed: {
  mini() {
    return this.$vuetify.breakpoint.mdAndDown;
  }
}
tao
  • 82,996
  • 16
  • 114
  • 150
  • Quick question. I am getting this error when I am on desktop screen size: `Computed property "mini" was assigned to but it has no setter.` – Jason Jun 05 '19 at 20:57
  • Has to do with combo of `computed` and `v-model`. See [this](https://stackoverflow.com/questions/46106037/vuex-computed-property-name-was-assigned-to-but-it-has-no-setter). What I can tell you is that Vue's `computed` properties are actually javascript setters/getters but typically they're only used as getters. Can you provide a [mcve]? Use codesandbox.io (or similar) if you need a multi-file snippet. Anyways, it appears to be a completely separate question, even though it applies on the same directive. That is to say, you'll have this problem regardless of the contents of your computed prop. – tao Jun 05 '19 at 21:04
  • I encourage you to ask it as a separate question, providing a minimal reproducible example. Because ***it is*** a separate question. According to SO rules, even if I knew the exact answer, I shouldn't have answered here as I would have deprived future users having the same issue from being able to easily find the answer. – tao Jun 05 '19 at 21:08
  • 1
    :) that was my plan. I am rebuilding the codepen. I will create a new question and link it here – Jason Jun 05 '19 at 21:09
  • here is the new question: https://stackoverflow.com/questions/56468213/switch-vuetify-navigation-drawer-to-mini-and-then-temporary – Jason Jun 05 '19 at 21:24
  • did you see the new link? – Jason Jun 05 '19 at 21:40