I was having problem while making a toggleable navigation using a vue.js component called vue-tasty-burgers.
to show my menu when data from the imported Component isActive is true using v-show but can’t seems to find any way to get the data.
I tried to include v-show=”isActive” but it doesn’t seems to get the variable from my isActive burger component’s data.
This is where I get so far:
<transition name=”fade”>
<div v-show=”isActive” class=”menu”>
<transition-group name=”list” tag=”nav”>
<router-link key=”home” to=”/Home” class=”menu-item”>
Home
</router-link>
<router-link key=”portfolio” to=”/Portfolio” class=”menu-item”>
Portfolio
</router-link>
<router-link key=”technology” to=”/Technology” class=”menu-item”>
Technology
</router-link>
</transition-group>
</div>
</transition>
<div class=”hero”>
<div class=”header”>
<router-link to=”home”>
<div class=”brand”>
<img src=”../assets/brand.png”>
<div class=”tagline”>
Your<br>Little<br>Spaceship
</div>
</div>
</router-link>
<div class=”burger”>
<tasty-burger-button
type=”spin”
color=”#fff”
activeColor=”#fff”/>
</div>
</div>
</div>
TL;DR - How do I get data from imported burger component’s isActive data?
Solution :
props propagate down, events bubble up
What that means is that you cannot get the data from the component, but instead you need to listen to the event.
here is the documentation
so you would use it something like this…
<template>
<tasty-burger-button
:active=”isActive”
@toggle=”setIsActive”
/>
</template>
<script>
export default {
data () {
return {
isActive: false,
}
},
methods:{
setIsActive(value) {
this.isActive = value;
}
}
}
</script>