I have a new project in Vue.js where I need to update the data value of app.vue based on the checkbox status in the child component. The code snippets for both files are as follows:
Component File:
<template>
<div>
<h3>Edit User</h3>
<p>Local: {{ $route.query.local }}</p>
<p>Number: {{ $route.query.q }}</p>
<label><input type="checkbox" @click="change()">Customize</label>
</div>
</template>
<script>
export default {
props:["changeParentStatus"],
data() {
return {
active: false
};
},
methods: {
change() {
this.active = !this.active;
console.log(this.active);
this.changeParentStatus(this.active);
}
}
}
</script>
App.vue File:
<template>
<div :class="[{ 'active': active }]">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1>Routing</h1>
<hr>
<app-header></app-header>
<router-view :changeParentStatus="changeStatus"></router-view>
</div>
</div>
</div>
</template>
<script>
import AppHeader from "./components/Header.vue";
export default {
data(){
return{
active: true
}
},
methods:{
changeStatus(active){
this.active=active
}
},
components:{
appHeader: AppHeader
}
}
</script>
<style>
.active{
background: black;
}
</style>
I'm looking for a way to toggle the value of the 'active' data property in app.vue between true and false based on the checkbox state in the component file. Any assistance would be greatly appreciated.
Folder Structure:
src---> app.vue
components---->users----->userEdit.vue (component file)