emit value from mounted in child.vue to parent.vue

Question

I'm working with BootstrapVue.

I need to emit a value to my parent.vue - but my code line this.$emit('info', this.hide); doesn't work out.

If I console.log(this.hide) i get my value correct in this case false, otherwise if my if-statement is correct I get it true.

What is the mistake in here?

script of my child.vue:

data(){
  return {
    hide: true,
  }
}

mounted() {
  if (statement) {
    if(some statement) {
      //do something
    } else {
      this.hide = false;
      console.log(this.hide); //HERE I GET CORRECT VALUE
      this.$emit('info', this.hide); //THIS DOESNT WORK
    }
  }
}

How it should work in my parent.vue:

<template>
  <div @info="info">
    <div> //THIS DIV SHOULD BE SHOWN IF this.hide = false
    </div>
    <div> //THIS DIV SHOULD BE SHOWN IF this.hide = true
    </div>
  </div>
</template>

Answer 1

Try something like following snippet :

Vue.component('Child', {
  template: `
    <div class="">
      child
      <button @click="changeHide">change hide</button>
    </div>
  `,
  data(){
    return {
      hide: true,
    }
  },
  methods: {
    changeHide() {
      this.hide = !this.hide
      this.sendInfo()
    },
    sendInfo() {
      this.$emit('info', this.hide);
    }
  },
  mounted() {
    //if (statement) {
      //if(some statement) {
        //do something
      //} else {
        this.hide = false;
        this.sendInfo()
      //}
    }
  
})

new Vue({
  el: '#demo',
  data(){
    return {
      info: null,
    }
  },
  methods: {
    setInfo(val) {
      this.info = val
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-if="!info"> //THIS DIV SHOULD BE SHOWN IF this.hide = false
  </div>
  <div v-if="info"> //THIS DIV SHOULD BE SHOWN IF this.hide = true
  </div>
  <p>from child info is: {{ info }}</p>
  <Child @info="setInfo" />
</div>