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

Question

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

Russ Deneychuk · Accepted Answer · 2022-09-10 00:20:39Z

5

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

answered Sep 10, 2022 at 0:20

Russ Deneychuk

8256 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related