VueJS: Sending data value from child component to parent

0
votes

I have a VUE compoment rendering inside index.vue

in index.vue we have some data

data(){
      return {
      splashIsActive: true,
      tutorialIsActive: false,
      gameIsActive: false
      }
    }

and the component inside index.vue

<SplashBox v-if="splashIsActive"/>

Then, if we go to splashBox there's a button.

<button @click="debug">....

Is there any way to create a method that after clicking the button sends, or changes splashIsActive to false, instead of true as it is stored in index.vue?

Thanks a lot

1
javascriptvue.js

1 Answers

0
votes

You need to emit an event to the parent.

<button @click="debug">....


methods: {
   debug() {
     this.$emit('setSplashUnActive', false)
   }
}

In the parent component.

<SplashBox v-if="splashIsActive" @setSplashUnActive="setSplashUnActive" />


methods: {
   setSplashUnActive(value) {
      this.splashIsActive = value
   }
}