Search code examples
javascriptvuejs3refvue-composition-api

How to use a template ref on a custom component in vue 3 compositon api

When I try to get the ref of my custom components it results in:

Proxy {__v_skip: true}
[[Handler]]: Object
[[Target]]: Proxy
[[IsRevoked]]: false

but works just fine when replacing d-icon-button with a div tag

Here is a quick example that returns the console log from above:

<template>
      <d-icon-button ref="button">
        ...
      </d-icon-button>
</template>
<script lang="ts" setup>
/* imports ... */
const button = ref(null);

onMounted(()=>{
  console.log(button.value)
})

And here is the d-icon-button component itself: vuelize -> d-icon-button

I think it has something to do with the wrapper I use in every component, but that's all I know so far

Solution

  • I think this answer might be related to your issue.

    You have to expose refs from components because they are "closed" by default: https://vuejs.org/api/sfc-script-setup.html#defineexpose