I'm on Vue 3.2.31 and for some reason I can't get a reference to the freshly mounted element.
I have a ConfirmModal
component which exposes a show()
method, and it works in pure vue if I drop the component on a page and use a ref
to get the instance, I can call the method on my instance.
I'm trying to use this library to instanciate multiple ConfirmModal component from code (from a service/helper) and for some reason I cannot get a reference to the newly mounted component. I can see the Hi
in the console, meaning the code gets called, but the component does not appear in the DOM, and I didn't find how to cast vNode into my component to be able to call public methods on them.
One interesting thing : If my component uses a <Teleport>
I can see the component appear in the teleport zone, meaning they DO get created. But my problem lies at calling methods on them.
This is how I call the component from my service/helper :
import { mount } from 'mount-vue-component'
import { h } from 'vue'
import ConfirmModal from '@/views/components/ui/confirm-modal.vue';
export const Confirm = {
danger: () => {
const comp = {
props: ['title'],
setup: (props: any) => () => h(ConfirmModal),
unmounted() { console.log("Bye") },
mounted() { console.log("Hi") }
};
const { vNode, destroy, el } = mount(comp, { props: { title: 'world' } });
(vNode as any).show(); // <--- This will crash
}
};
And this is how I call it:
<button class="btn btn-danger" @click="Confirm.danger('yo inside')">DANGER</button>
What is the proper way to cast vNode
to my component class, or where can I find the reference ?
Thanks !