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

Exploring the process of updating computed variables in Vue.jsDiscovering the

Using app.use in Express/node.js for routing causes the client to experience excessive delays

What is causing the initial activation of the <button> within a form?

Browser encountering HTTP response that has been shorted extensively

How can I utilize the context menu feature within a Material React Table row?

Passing an array of ID's between two components in Angular: A comprehensive guide

The xModal window will only pop up once, after which a page refresh is required

Form values not being transmitted correctly in Ajax POST request

Ways to determine if an image has a designated width/height using JavaScript (jQuery)

Utilize a map image as a texture on a plane within a personalized shader in THREE.js

The image is experiencing difficulty loading from the Express static directory

The prop type for `rows` is invalid in `ForwardRef(DataGrid)`. It was supplied as an object instead of the expected array

Issues with fetching data from a Drupal module using an Ajax call

Incorporating Ajax to allow users to choose an option from a selection for

jQuery Validation is not functioning correctly

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

What sets apart .create from .save in mongoose?

What is the best way to navigate to a specific location on a web page?

Leveraging the $dirty property in AngularJS to determine if any changes have been made to a form

Text that appears automatically in an input field