CODEWITHSUNDEEP
vue.jsvue-component
Aftar Fadilah
Aftar Fadilah

Reputation: 7

How to get imported component's data on Vue.js?

I was having problem while making a toggleable navigation using a vue component called vue-tasty-burgers. I want 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?

Upvotes: 0

Views: 195

Answers (1)

Daniel
Daniel

Reputation: 35704

props propagate down, events bubble up

What that means is that you cannot get the data from your 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>

Upvotes: 1

Related Questions