[Vuejs]-State mutation in Vuejs

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.

Leave a comment