Hi All,
I am a self taught beginner that has managed to write several apps thanks to this and other generous communities.
I have been trying for days to create a popover using popoverController and importing a component for the content. I have no issues with inline popovers but when using the popoverController I am only seeing the backdrop and not the component content. I have placed a console log in the component script to see if it is being used but nothing gets written to the console. It’s as though the component is not being imported but I am getting no path or other errors and other components are being imported into the template using the same path alias. I am almost certain it isn’t a css issue or a path issue but beyond that I am out of my depth. Below is the simplified excerpts of my app. Thanks in advance for any insights.
Ionic V6 Vue3
MyPopover.vue
<ion-content>Hello World!</ion-content>
</template>
<script lang="ts">
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'testPopover',
components: { IonContent },
});
</script>
settings.vue
<ion-page>
<ion-content>
<ion-button @click="openPopover($event)">Click Me</ion-button>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { IonPage, IonButton, IonContent, popoverController } from '@ionic/vue';
import MyPopover from '@/components/popovers/testPopover.vue'
export default defineComponent({
name: 'test-popover',
components: {
IonPage,
IonContent,
IonButton
},
setup() {
const openPopover = async (event: Event) => {
const Popover = await popoverController.create({
component: MyPopover,
event: event,
});
await Popover.present();
console.log(Popover)
}
return {
openPopover
}
}
})
</script>
<style scoped></style>