link548 link549 link550 link551 link552 link553 link554 link555 link556 link557 link558 link559 link560 link561 link562 link563 link564 link565 link566 link567 link568 link569 link570 link571 link572 link573 link574 link575 link576 link577 link578 link579 link580 link581 link582 link583 link584 link585 link586 link587 link588 link589 link590 link591 link592 link593 link594 link595 link596 link597 link598 link599 link600 link601 link602 link603 link604 link605 link606 link607 link608 link609 link610 link611 link612 link613 link614 link615 link616 link617 link618 link619 link620 link621 link622 link623 link624 link625 link626 link627 link628 link629 link630 link631 link632 link633 link634 link635 link636 link637 link638 link639 link640 link641 link642 link643 link644 link645 link646 link647 link648 link649 link650 link651 link652 link653 link654 link655 link656 link657 link658 link659 link660 link661 link662 link663 link664 link665 link666 link667 link668 link669 link670 link671 link672 link673 link674 link675 link676 link677 link678 link679 link680 link681 link682 link683 link684

[Vue.js] Await a grandparent component's method to be resolved in grandchild component Subscribe to RSS

there is three components in my vue.js application:

Home: (Button’s grandparent)
Dialog: (Home’s child / Button’s parent)
Button: (Home’s grandchild)

The Home component has a async method:

async handleDialogAccept() {
try {
const response = await this.$axios.get(‘https://jsonplaceholder.typicode.com/todos/');
console.log(response.data);
} catch (err) {
console.log(err);
}
},

And it will executed as soon as the Dialog component emits the “accept” custom event:

<dialog-confirmation
@accept=”handleDialogAccept()”
/>

The Dialog component has a child (Button):

<button-accept
v-on=”$listeners”
\>
Accept
</button-accept>

In my buttonAccept.vue.js which is being imported in the Dialog and used as shown above has the next structure:

<template>
<v-btn
color=”primary”
@click=”handleClick()”
:loading=”loading”
:disabled=”loading”
\>
<slot name=”accept”></slot>
</v-btn>
</template>

<script>
export default {
props: [‘parentFunction’],
data() {
return {
loading: false,
};
},
methods: {
handleClick() {
this.$emit(‘accept’);
},
},
};
</script>

I will like to execute the next steps inside the handleClick method:

Set loading to true
Emit the accept custom event
Wait until the handleDialogAccept is done
Set loading to false

Is there a wait to do so?

Solution :

Maybe, you can define a variable (isAcceptDone) in Home component to determine whether the async method is done or not in the Button component.

The Home component

async handleDialogAccept() {
try {
const response = await this.$axios.get(‘https://jsonplaceholder.typicode.com/todos/');
console.log(response.data);
this.isAcceptDone = true;
} catch (err) {
console.log(err);
}
},

The Dialog component

<dialog-confirmation
@accept=”handleDialogAccept()”
:isAcceptDone=”isAcceptDone”
/>

The Button component

<script>
export default {
props: [‘parentFunction’, ‘isAcceptDone’],
data() {
return {
loading: false,
};
},
watch: {
isAcceptDone(val) {
if(val) {
this.loading = false
}
}
},
methods: {
handleClick() {
this.$emit(‘accept’);
},
}
};
</script>

On the other hand, If you thought it is too complicated to pass isAcceptDone in three components. Using EventBus is another simple ways.