I have a component called customize-charts which contains a Vuetify drawer:
<template>
<v-col>
<v-btn style="float: right" class="mr-4 mt-2" small @click="toggleCustomize" v-if="!open">Customize Dashboard</v-btn>
<v-navigation-drawer
v-model="open"
temporary
absolute
right
style="width: 25vw"
>
<span>draw contents</span>
<v-divider />
</v-navigation-drawer>
</v-col>
</template>
<script>
export default {
props: {
data: {
type: Array,
default () { return [] }
},
open: {
type: Boolean,
default () { return false }
}
},
data () {
return {
draggingItem: null
}
},
methods: {
toggleCustomize () {
this.$emit('open')
}
}
}
</script>
It can be observed that the boolean "open" is the model that the drawer listens to and it is received from the parent component:
<customize-charts v-if="chartCards.length" :data="chartCards" :open="customizePanel" @updateorder="updateOrder" @toggleshow="toggleShow" @open="customizePanel=!customizePanel"/>
The parent component also includes the following:
{
data () {
return {
customizePanel: false,
}
}
}
However, there is an issue when the custom event open is triggered (@open="customizePanel=!customizePanel"); the drawer opens correctly, but it does not reset customizePanel to false when closed (when user clicks outside the drawer). Can you advise on how to address this?