主页 / 问题 / 1211819
Accepted
doox911
Asked:2021-11-30 19:25:36 +0000 UTC2021-11-30 19:25:36 +0000 UTC

disable-resize-watcher 不能在没有 v-model 的小屏幕上工作

  • 772

对于显示/隐藏控件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

vuetify

1 个回答

  1. Best Answer

    您需要进行双向连接。为此，您需要在事件上挂起一个方法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;
},
    • 0

相关问题