Looking to pass a boolean value from a view within a router-view up to the root App.vue and then on to a component in the App.vue. Successfully achieved this, but encountering an error:
Received a warning about mutating a prop directly, as it will be overwritten whenever the parent component re-renders. Suggested to use a data or computed property based on the prop's value. Prop causing mutation: "drawer"
Here is a snippet of the code:
In Home.vue:
<template>
<div class="home" v-on:click="updateDrawer">
<img src="...">
</div>
</template>
<script>
export default {
name: "Home",
methods:{
updateDrawer:function(){
this.$emit('updateDrawer', true)
}
};
</script>
The above view is located within a router-view and the value is passed to App.vue below:
<template>
<v-app class="">
<Navbar v-bind:drawer="drawer" />
<v-main class=" main-bg">
<main class="">
<router-view v-on:updateDrawer="changeDrawer($event)"></router-view>
</main>
</v-main>
</v-app>
</template>
<script>
import Navbar from '@/components/Navbar'
export default {
name: 'App',
components: {Navbar},
data() {
return {
drawer: false
}
},
methods:{
changeDrawer:function(drawz){
this.drawer = drawz;
}
},
};
</script>
The value of drawer is sent by binding it in the navbar component.
In Navbar.vue:
<template>
<nav>
<v-app-bar app fixed class="white">
<v-app-bar-nav-icon
class="black--text"
@click="drawer = !drawer"
></v-app-bar-nav-icon>
</v-app-bar>
<v-navigation-drawer
temporary
v-model="drawer"
>
...
</v-navigation-drawer>
</nav>
</template>
<script>
export default {
props:{
drawer:{
type: Boolean
}
},
};
</script>
This method works only once before displaying the aforementioned error. Seeking advice on how to address and resolve this issue.