0
231
Vistas¿Por qué este error no me permite renderizar de forma asíncrona los componentes de Vue?
Soy bastante nuevo con Vue, y estoy tratando de cargar un Componente de forma diferida, recibo este error que no entiendo, probablemente debería haber un error de sintaxis. Aquí está el código:
<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> Modal Comp es solo un simple h2 y ap con un borde rojo (ya probé el mismo código sin carga diferida y funciona bien). Aquí está el error: 
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
Al envolver defineAsyncComponent() en una función, está declarando incorrectamente el componente Modal como una función:
export default { components: { /* 👇 don't do this */ Modal: () => defineAsyncComponent(() => import('@/components/Modal.vue')) }, }La solución más simple es eliminar el contenedor de función:
export default { components: { Modal: defineAsyncComponent(() => import('@/components/Modal.vue')) }, }
·
Santiago Trujillo
Denunciar
0
Parece que estás mezclando API de composición y opciones
Pruebe lo siguiente en el <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
Denunciar
Responde la pregunta