Question

我已经使用Vuetify的导航抽屉创建了 侧边栏 组件。代码看起来像这样：

<template>
  <v-navigation-drawer persistent clipped v-model="isVisible" fixed app>
    <!-- content of the sidebar goes here -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    visible: Boolean,
  },
  data() {
    return {
      isVisible: this.visible,
    };
  },
}
</script>

请注意，我正在将 visible 道具与 isVisible 数据复制。我尝试直接在 v-model 中使用道具，但是每次边栏关闭时，我都会在控制台中收到有关直接更改道具的警告，因为它们会被覆盖当父母重新渲染时。

在父视图中，我在工具栏上有一个按钮，该按钮应根据工具栏的可见性来更改图标。

<template>
  <v-container fluid>
    <sidebar :visible="sidebarVisible"/>
    <v-toolbar app :clipped-left="true">
      <v-btn icon @click.stop="sidebarVisible = !sidebarVisible">
        <v-icon v-html="sidebarVisible ? 'chevron_right' : 'chevron_left'"/>
      </v-btn>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
    <v-footer :fixed="fixed" app>
      <span>&copy; 2017</span>
    </v-footer>
  </v-container>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue';

export default {
  name: 'MainView',
  data() {
    return {
      sidebarVisible: false,
      fixed: false,
      title: 'Title',
    };
  },
  components: {
    Sidebar,
  },
};
</script>

我遇到的问题是，如果我通过在工具栏外部单击来关闭它，则工具栏上的按钮图标不会更改为 人字形左 。此外，为了使边栏恢复正常，我需要单击两次按钮。

很明显，这是因为在关闭侧栏时，主视图中的 sidebarVisible 数据未更新。边栏关闭时，如何确保更新 sidebarVisible ？

Answer 1

我正在使用下一个建筑...

在我的组件中

<template>
  <v-navigation-drawer v-model="localDrawer"></v-navigation-drawer>
</template>
...
<script>
  export default {
    props: { value: { type: Boolean } },
    data: () => ({
     localDrawer: this.value
    }),
    watch: {
     value: function() {
       this.localDrawer = this.value
     },
     localDrawer: function() {
       this.$emit('input', this.localDrawer)
     }
    }
  }
</script>

在父层中

<app-drawer v-model="drawer"></app-drawer>

这对我有用

Answer 2

使用 v-bind：value 或：value 绑定道具中的抽屉值。

子组件：

<template>
 <v-navigation-drawer v-bind:value="drawer"></v-navigation-drawer>
</template>

<script>
export default {
    props : ['drawer']
}
</script>

父组件：

<template>
<app-side-bar :drawer="drawer"/>
  <v-app-bar app clipped-left>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>
</template>

Answer 3

修正导航抽屉问题修正：

将浏览器窗口重置为默认100％
这是代码，

模板：

<nav>
     <v-toolbar flat app>
        <v-toolbar-side-icon class="grey--text" @click="toggle"></v-toolbar-side-icon>

        <v-toolbar-title class="text-uppercase grey--text">
          <span class="font-weight-light">Repo</span>
          <span>hub</span>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn flat color="grey">
          <span>Sign Out</span>
          <v-icon right>exit_to_app</v-icon>
        </v-btn>
      </v-toolbar>

      <v-navigation-drawer app v-model="drawer" class="indigo">
        <p>test</p>
      </v-navigation-drawer>
</nav>

脚本：

export default {
  data() {
    return {
      drawer: false
    };
  },
  methods:{
    toggle(){
        this.drawer = !this.drawer;
    }
  }
};

Vuetify：导航抽屉：将V模型更改传达给父公司

3 个答案: