Control Vue-Component Visability, Access Data from Component

Hi, I need help understanding how to access component data in the root/ App.vue file.

I want to control a component’s visibility with a v-if directive on the so that when a boolean value becomes true it becomes visible and if it is false it disappears.

The boolean variable lives in the component.vue file, inside of an object consisting of several boolean variables. The boolean value changes on a click event and the controlling method is in the component as well.

I can load the component into the App.vue file and I can see the method to change the boolean value is being called when I run the program on local:host 5000.

How do I access the boolean value from my component in the App.vue? In particular how can I use this value in the v-if directive to control component visibility?

Thanks
B-A

Please provide code related to your issue. Without it, it’s hard for us to help. You can refer to our guide on asking for help for more information. Thanks!

I have this header/nav component, it will always be displayed at the top of my app

!-- TitleHeader.vue →
template>
div class = “header”>
div id = “siteName”><span @click = “viewHome”>My Site
div id = “sitePhrase”> {{siteMessage}}
div id = “siteAbout”><span @click = “viewAbout”>About
div id = “siteHelp”><span @click = “viewHelp”>?
/div>
/template>
script>

export default {
name: ‘TitleHeader’,
data(){
return{
phrases: ["Welcome To My Site, “Have your Favorite Kind of Day”, “Innovating Website Layouts”],
contentDisplay: {
helpIsOn: false,
aboutIsOn: false,
homeIsOn: true
}
}},
methods: {
setContentFalse(){
Object.keys(this.contentDisplay).forEach(v => this.contentDisplay[v] = false)
},
viewHome(){
this.setContentFalse();
this.homeIsOn = true;
},
viewAbout(){
this.setContentFalse();
this.aboutIsOn = true;
},
viewHelp(){
this.setContentFalse();
this.helpIsOn = true;
}
},
computed: {
siteMessage(){ return this.phrases[Math.floor(Math.random()*this.phrases.length)]}
}}
/script>

My App.vue file is:

template>
div id = “app”>
div id=“header”>
TitleHeader>
/div>
div id = “mainContent”>
HomePage v-if = “TitleHeader.homeIsOn === true”>
HelpPage v-if = “TitleHeader.helpIsOn === true”>
AboutPage v-if = “TitleHeader.aboutIsOn === true”>
/div>
/div>
/template>

script>
import TitleHeader from ‘./components/TitleHeader.vue’
import HomePage from ‘./components/HomePage.vue’
import HelpPage from ‘./components/HelpPage.vue’
import AboutPage from ‘./components/AboutPage.vue’

export default {
name: ‘App’,
data(){return{ }
},
components: {
TitleHeader, HomePage, HelpPage, AboutPage
/script>

I would like to access the below data from TitleHeader.vue in App.vue to control the v-if conditions on the component tags.
contentDisplay: {
helpIsOn: false,
aboutIsOn: false,
homeIsOn: true
}
The values are changed by code in the TitleHeader.vue file, I want the same part of the DOM to display any of these three pages, but only one at a time. The TitleHeader.vue is a navbar kind of system.

Please let me know if its still unclear what I am trying to do, thanks!