Async component delay and loading not working.
My code:
<template>
<div>
<button @click="startMethod">start</button>
<async-component v-if="start" />
</div>
</template>
<script>
import Loading from '~/components/loading.vue'
import Error from '~/components/error'
const AsyncComponent = () => ({
component: import('~/components/someComponent.vue'),
loading: Loading, // not work
error: Error, // good
delay: 2000, // not work
timeout: 3000 // good
});
export default {
components: {
AsyncComponent
},
data: () => ({
start: false
}),
methods: {
startMethod(){
this.start = true
}
}
}
</script>
How do I delay the display of loading component? and I don’t understand why the loader is not displayed and delay is not working.
Because It's
Delay before showing the loading component. Default: 200ms.
Ref: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
Try to set it 10 or 0 you will see your loading component