CODEWITHSUNDEEP
vue.js
AEB
AEB

Reputation: 125

Using v-show on root component by child data

In my root component, I have a channels component and in that component, there is a boolean value that I want my root component to be displayed regarding the value. Is there a way to achieve that aim? I have tried using children value but it didn't even render the root component. My root component :

<template>
  <div id="app" v-show="!$children[0].isPlayerOpen">
    <Channels/>
  </div>
</template>

My channels component : 

data() {
    return {
      ..
      isPlayerOpen:false,
      ..
    };
  }

Upvotes: 1

Views: 312

Answers (1)

Shivam Singh
Shivam Singh

Reputation: 1731

Root / parent component

<template>
  <!-- [6] use the data property to show / hide component in v-show directive -->
  <div id="app" v-show="showChannel">
    <!-- [3] Collect the emitted event & attach a handler to it -->
    <!-- [4] So, if an event is emitted, attached handler will be called -->
    <Channels 
      @on-change-is-player-open-value="handleOnChangeIsPlayerOpenValue"
    />
  </div>
</template>

export default {
  data () {
    return {
      showChannel: false
    }
  },
  methods: {
    // [5] In events handler, set the new value for the data property that has come form the child
    handleOnChangeIsPlayerOpenValue (newValue) {
      this.showChannel = newvalue
    }
  }
}

Channels / child component

export default {
  watch: {
    isPlayerOpen: { // [1] watch `isPlayerOpen` in child component, if it changes below handler will be called
      handler (newValue) {
        this.$emit('on-change-is-player-open-value', newValue) // [2] emit an event
      },
      immediate: true
    }
  }
}

Upvotes: 2

Related Questions