vuejs2 - 验证 : Navigation drawer: communicate v-model changes to parent co

Question

我使用 Vuetify 的抽屉导航创建了一个 Sidebar 组件。代码看起来像这样:

<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>

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

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

<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>

我遇到的问题是，如果我通过单击边栏外部来关闭边栏，工具栏上按钮的图标不会更改为 chevron-left。此外，为了恢复侧边栏，我需要点击按钮两次。

很明显，这是因为侧边栏关闭时，主视图中的 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>

对我有用