Currently, I'm utilizing VUE and facing an issue with a component named Quotation. Inside Quotation, there's another component (referred to as the child component) called sideBarOptions, which functions as a sidebar displayed above the parent component with an option to hide it.
Within sideBarOptions, there is a property I've defined as conditions, initially set to false. My intention is to toggle this property to true using a simple @click event. However, the change does not take effect immediately; instead, it only triggers after closing sideBarOptions.
The code snippet looks like this:
Quotation.vue
<template>
<sideBarOptions :showSidebar=show @closeSideBar="closeSideBar"/>
</template>
export default {
data() {
return {
show: false,
}
},
methods: {
closeSideBar(value) {
this.show = value;
},
}
}
sideBarOptions.vue
<template>
<div @click="conditions = !conditions">
<input type="checkbox" id="box-1">
<label for="box-1">Accept</label>
</div>
<div class="sideBar">
<a href="#" class="closeBtn-send-email" @click="closeSideBar()">
<h2>Send Quotation</h2>
<span>X</span>
</a>
</div>
</template>
export default {
props: {
showSidebar: Boolean
},
data() {
return {
conditions: false,
}
},
methods: {
closeSideBar() {
this.$emit('closeSideBar', false);
},
}
}
I am puzzled about why the property only changes upon closing the child component. Can someone offer assistance? Thank you.