CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
Ghunhee Shin
Ghunhee Shin

Reputation: 25

Can I get event from Invisible Component?(Vue.js)

Can I get event from Invisible Component?

At first, the 'LoadingSpinner.vue' is working with v-if is ture. and I send event from DisplayStatus.

but, the ProcessingPage's method(processCompleted) doesn't work. can I use event with Invisible component? can I know why..? If It can, How can I try that?

Thank you for watching my question.

ProcessingPage.vue 

<template>
  <div class="process-container">
      <LoadingSpinner v-if="isProcessing" />
      <DisplayStatus v-if="isProcessing" v-on:child-event="processCompleted">       </DisplayStatus>
  </div>
</template>

<script>
import LoadingSpinner from './common/LoadingSpinner.vue';
import DisplayStatus from './DisplayStatus.vue';
export default {
    components: {
        LoadingSpinner,
        DisplayStatus
    },
    data() {
        return {
            isProcessing: false,
        }
    },
    methods: {
      processCompleted() {
            this.isProcessing = false;
            console.log('completed');
      }
    },
    mounted() {
        // this.status = 'processing';
        this.isProcessing = true;
        // this.loading = setInterval(this.getStatus, 5000);
    }
}

DisplayStatus.vue

<template>
    <div>
        <h1>{{ status }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            status:'',
        }
    },
    methods: {
        async getStatus() {
            const dataId = this.$store.state.dataId;
            const response = await this.$store.dispatch('GETSTATUS',dataId);
            if(response.data.status == 'done') {
                this.$emit('processCompleted');
                this.status = 'Done!!';
                console.log(this.status);
                clearInterval(this.loading);
            }else if(response.data.status == 'failed') {
                clearInterval(this.loading);
                this.warring = true;
                this.isProcessing = false;
                this.status = 'Something Wrong...';
            }
        },
    },
    mounted() {
        this.status = 'processing';
        this.loading = setInterval(this.getStatus, 5000);
    }
}
</script>

<style>

</style>

Upvotes: 0

Views: 261

Answers (1)

Hardik Kheni
Hardik Kheni

Reputation: 71

<DisplayStatus v-if="isProcessing" v-on:child-event="processCompleted">       </DisplayStatus>

v-on:child-event should be v-on:process-completed which you are emitting inside component.

emitting event only works if component is mouted and emiting event using v-if is not the best idea you can use v-show too.

v-show works like the component will be always mounted but it will be hidden and when expresion is true the it will set the css display none to block.

Upvotes: 1

Related Questions