Once component B has finished loading, I trigger an "emit" event to notify component A using EventBus.
When A receives the event with a value of "on", it updates a specific data value to true.
This value is stored in a computed property and can only be accessed using an "a tag" if it is true.
However, even though the value changes to true, the click event still returns "return false;"
Is there a way to make the click event behave dynamically in VueJS?
Component B
...
this.$EventBus.$emit("Loading");
...
Component A
<template>
<a href="javascript:void(0)" @click="completed ? btnFinish : 'return false;'">Complete</a>
</template>
<script>
data() {
return {
loading: false,
}
},
mounted() {
this.$EventBus.$on('Loading', ()=>{
this.loading = true;
});
},
computed: {
completed() {
return this.loading
}
}
</script>