Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

Question

Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

I am looking to create a Vue async component that stays in a loading state until a custom event is triggered. This means it will render a specified loading component until the event occurs.

Here's an example of how I want it to work:

const AsyncComponent = () => ({
  component: () => new Promise( resolve => import('./MyComponent.vue')
    .then(component => component.$emit.on('customLoadedEvent', resolve))
  ),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

Is it possible to easily configure something like this?

javascript vue.js asynchronous

Answer 1

Answer №1

To include the custom event as a prop, you can follow this method:

<template>
  <div v-if="updating">
    <div v-if="!error">
      <!-- content will be displayed here, such as a loading indicator -->
    </div>
    <div v-if="error">
      <p>Oops, something went wrong</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    customEvent: {
      type: any, // potentially Function? it's uncertain
      required: true,
    }
  },
  data() {
    return {
      error: false,
      updating: false,
    };
  },
  mounted() {
    this.updating = true;
    this.customEvent()
      .then((res) => {
        // carry out actions
        this.updating = false;
      })
      .catch((err) => {
        console.log(err);
        this.error = true;
      });
  }
}
</script>

This component triggers customEvent in the mounted lifecycle hook. Confirm if this behavior aligns with your requirements.

To utilize the component, use the following syntax:

<CustomLoadingIndicator :customEvent="someEvent" />

You may consider adding a close button. Regardless of how you clear the component (possibly using setTimeout in the lifecycle hook), ensure to reset the updating and error data properties.

Answer 2

To include the custom event as a prop, you can follow this method:

<template>
  <div v-if="updating">
    <div v-if="!error">
      <!-- content will be displayed here, such as a loading indicator -->
    </div>
    <div v-if="error">
      <p>Oops, something went wrong</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    customEvent: {
      type: any, // potentially Function? it's uncertain
      required: true,
    }
  },
  data() {
    return {
      error: false,
      updating: false,
    };
  },
  mounted() {
    this.updating = true;
    this.customEvent()
      .then((res) => {
        // carry out actions
        this.updating = false;
      })
      .catch((err) => {
        console.log(err);
        this.error = true;
      });
  }
}
</script>

This component triggers customEvent in the mounted lifecycle hook. Confirm if this behavior aligns with your requirements.

To utilize the component, use the following syntax:

<CustomLoadingIndicator :customEvent="someEvent" />

You may consider adding a close button. Regardless of how you clear the component (possibly using setTimeout in the lifecycle hook), ensure to reset the updating and error data properties.

Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

Answer №1

Similar questions

Retrieve worldwide data for the entire application in Next.js during the first page load

Searching for the closest jQuery value associated with a label input

Undefined value is encountered when passing props through the Context API in a REACT application

Why is my console showing a SyntaxError with JSON.parse and an unexpected character?

Regex pattern to replace the zero preceding two times within a string based on distinct criteria

Unable to retrieve the field value from the Json Object

Mapbox is capable of managing several GEOJSON files by utilizing the loadURL function

Receiving alerts about props passed in MUI styled components triggering React's lack of recognition

Adjusting Iframe Dimensions Dynamically with Javascript based on Anchor Location

Having trouble getting Firebase phone number authentication to work with Vue.js

Pass the JavaScript variable and redirect swiftly

Switch out the ajax data in the input field

Replicate and $(document).ready()

Problem arising from apostrophe usage in Javascript OData request

Oops! Make sure to explicitly allow the dependency @types/html2canvas by adding it to the "allowedNonPeerDependencies" option

State dropdown in Angular dynamically updates based on the country selected

What is the best way to incorporate tooltips in SVG?

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

Having trouble getting Vue to properly focus on an input field

What could be causing the VueJS function not to be triggered by the dropdown selection?