Search code examples
vuejs3vue-composition-api

how to use this.$refs in vue 3 composition api?

I use vue3-simple-html2pdf.

<vue3-simple-html2pdf ref="vue3SimpleHtml2pdf" :options="pdfOptions" :filename="exportFilename">
    <div class="main-content">
        <h1>PDF</h1>
    </div>
</vue3-simple-html2pdf>
<button @click="download">Download pdf</button>

documentation says to do this when i want to download pdf

this.$refs.vue3SimpleHtml2pdf.download()

I use composition api and try to do like this

const vue3SimpleHtml2pdf = ref(null)

const download = () => {
   vue3SimpleHtml2pdf.download()
}

but it doesn't work

how can I fix it?

Solution

  • I forgot that I should refer to the

    vue3SimpleHtml2pdf.value.download()

    not to the

    vue3SimpleHtml2pdf.download()

    another solution is to call the function on click in the template

    <button @click="this.$refs.vue3SimpleHtml2pdf.download()">Download pdf</button>