0👍
✅
The proper way to mutate parent data is to send it a message, letting the component that ‘owns’ the data mutate it. v-model
is usually just sugar for :value
and @input
, so replace and forward.
sidebar
Add a prop
to sidebar called drawer
<v-navigation-drawer
v-if="li"
:value="drawer"
@input="$emit('update:drawer', $event)"
props: {
drawer:{}
}
parent
<sidebar :drawer='drawer' @update:drawer='drawer=$event' />
data() {
return {
drawer: false
}
}
Other Options
You can also use a reactive store, such as Vuex to hold the value, and then your message and binding would be directed to the store instead of emitted to the parent.
Source:stackexchange.com