[Vuejs]-Vue Async Components – How to resolve with emitted event

by

0👍

You could pass the custom event as a prop like this:

<template>
  <div v-if="updating">
    <div v-if="!error">
      <!-- content here, probably a loading indicator -->
    </div>
    <div v-if="error">
      <p>Oops, something went wrong</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    customEvent: {
      type: any, // maybe Function? not sure
      required: true,
    }
  },
  data() {
    return {
      error: false,
      updating: false,
    };
  },
  mounted() {
    this.updating = true;
    this.customEvent()
      .then((res) => {
        // do something
        this.updating = false;
      })
      .catch((err) => {
        console.log(err);
        this.error = true;
      });
  }
}
</script>

this component would fire customEvent in the mounted life cycle hook, not sure if that’s the kind of functionality you want.

You’d use the component like this:

<CustomLoadingIndicator :customEvent="someEvent" />

You’d probably want to add a close button, but however you clear the component (setTimeout in the lifecycle hook?) you’d want to reset the updating and error data properties.

Leave a comment