[Vuejs]-How to create a wrapper component on top of existing component in Vue?

by

1👍

So, the dialogRef has no method exposed named show (dialogRef.value.show is not a function).

This happens because the ref is likely pointing to the wrapper component (my-dialog) rather than the actual q-dialog component.

you need to expose the show and other methods from the inner q-dialog component to your wrapper my-dialog component and then use them in the parent confirm-dialog.

Alright. So let’s jump on the code:

my-dialog.vue:

<script setup lang="ts">
// ... other imports ...

const dialogRef = ref(null);

// Exposing the show method
const show = () => {
  dialogRef.value.show();
};

// Also hide
const hide = () => {
  dialogRef.value.hide();
};

// expose these methods
defineExpose({ show, hide });  
</script>

<template>
  <!-- using ref here to connect it -->
  <q-dialog v-bind="props" ref="dialogRef">
    <!-- rest of your template -->
  </q-dialog>
</template>

Hope this helps!

👤Ali Bahrami

Leave a comment