Espero que todos estén bien. Actualmente tengo algunos problemas con el uso de un componente que está dentro de un componente principal. Probé algunas cosas pero sin éxito... El componente ModalBoxActionArticle no quiere mostrarse y tengo el siguiente mensaje de error:
[Advertencia de Vue]: no se pudo resolver el componente: ModalBoxActionArticle en <Home onVnodeUnmounted=fn ref=Ref<undefined> > en at
¿Podrías ayudarme con esto por favor? Gracias de antemano por su tiempo y ayuda.
Encuentre a continuación la vista vue que está en la raíz de estos componentes:
<template> <div class="home"> <ImageArticle class="home__component"/> </div> </template> <script> import ImageArticle from "../components/imageArticle" export default { name: 'Home', components: { ImageArticle, } } </script>Encuentre debajo del componente ImageArticle (eliminé el estilo)
<template> <div> <article class="postWithImage"> <ModalBoxActionArticle/> <div class="postWithImage__1div"> <picture class="postWithImage__pictureProfile"> <img class="postWithImage__imgProfile" src="../assets/EugenieProfile.jpeg" alt="photo de profile de la personne qui a publié l'image"> </picture> .... here I removed some html to make it more readable .... </article> </div> </template> <script> import ModalBoxActionArticle from '../components/modalBoxActionArticle' export default { name: 'ImageArticle', component : { ModalBoxActionArticle }, setup() { console.log('%c loading ImageArticle component', 'color:green'); return {}; }, } </script>Por último, pero no menos importante, encuentre a continuación, el componente ModalBoxActionArticle que está dentro del componente ImageArticle
<template> <div class="modal"> <button class="modal__btt modal__btt--alert">Signaler</button> <button class="modal__btt">Partager</button> <button class="modal__btt">Modifier</button> <button class="modal__btt modal__btt--alert">Supprimer</button> </div> </template> <script> export default { name: "ModalBoxActionArticle", setup() { console.log('%cloading ModalBoxActionArticle newest component', 'color:red'); return {}; }, } </script>En ImageArticle.vue ha definido
component : { ModalBoxActionArticle }, Esto debe ser como (la letra s debe estar al final de la palabra component ):
components : { ModalBoxActionArticle },