Не работает disable-resize-watcher при малом экране без v-model

Question

Для управления отображения/Скрытия v-navigation-drawer, я не использую двунаправленную связь(v-model), так как мне необходимо переопреелять свойство. Состояние v-navigation-drawer храню в Vuex.

Разметка:

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      app
      :value="v_navigation_drawer"
    />

    <v-app-bar
      :value="v_app_bar"
      app
    >
      <v-app-bar-nav-icon
        @click="toggleVNavigationDrawer"
      />
    </v-app-bar>

    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

Проблема: Прималых размерах экрана, если кликунь на оверлей, то v-navigation-drawer скроется, а значениее свойства v_navigation_drawer не изменится. Как сделать так чтобы значение свойства v_navigation_drawer тоже менялось?

Версия Vuetify 2.2.11

Answer 1

Необходимо сделать двунаправленную связь. Для этого на событие input необходимо повесить метод, где в первом аргументе будет текущее значение v-navigation-drawer. Затем его можно переопределить(обновить).

Разметка:

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      app
      :value="v_navigation_drawer"
      @input="updateVNavigationDrawer"
    />

    <v-app-bar
      :value="v_app_bar"
      app
    >
      <v-app-bar-nav-icon
        @click="toggleVNavigationDrawer"
      />
    </v-app-bar>

    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

Метод в Vue-компоненте:

updateVNavigationDrawer(value) {
  this.$store.commit('UPDATE_V_NAVIGATION_DRIVER', value);
}

Метод в Vuex:

UPDATE_V_NAVIGATION_DRIVER(state, payload){
  state.v_navigation_drawer = payload;
},

БЛОГ НА HUSL

Не работает disable-resize-watcher при малом экране без v-model

Ответы (1 шт):