我使用 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>© 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 在边栏关闭时更新?
最佳答案
我正在使用下一个构造...
在我的组件中
<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>
对我有用
关于vuejs2 - 验证 : Navigation drawer: communicate v-model changes to parent co,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52124726/