0
230
VisualizaçõesWhy is this error not letting me async render Vue Components?
I'm quite new with Vue, and I'm trying to lazy load a Component, I'm getting this error which I don't understand, there should probably be a syntax error. Here's the code:
<template>
<div class="container">
<h1>Async testing</h1>
<button @click="showModal=!showModal">show modal</button>
<Modal v-if=showModal />
</div>
</template>
<script>
import { defineAsyncComponent, ref } from 'vue';
export default {
components: {
Modal: () => defineAsyncComponent(
() => import('@/components/Modal.vue')
)
},
setup(){
const showModal = ref(false);
return {
showModal
}
}
}
</script>
The Modal Comp is just a simple h2 and a p with a red border (I already tried the same code without lazy load, and it works fine).
Here's the error:
·
Santiago Trujillo
2 Respostas
Responde à pergunta0
By wrapping defineAsyncComponent() in a function, you're incorrectly declaring the Modal component as a function:
export default {
components: {
/* 👇 don't do this */
Modal: () => defineAsyncComponent(() => import('@/components/Modal.vue'))
},
}
The simplest solution is to remove the function wrapper:
export default {
components: {
Modal: defineAsyncComponent(() => import('@/components/Modal.vue'))
},
}
·
Santiago Trujillo
Relatório
0
Looks like you're mixing composition and options API
Try the following in the <script>
import { defineAsyncComponent, ref } from 'vue';
export default {
setup() {
const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
const showModal = ref(false);
return {
showModal,
Modal
}
}
}
·
Santiago Trujillo
Relatório
Responde à pergunta