javascript - How to use a template ref on a custom component in vue 3 compositon api - Stack Overflow

admin管理员组

文章数量:1392003

When I try to get the ref of my custom ponents 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 ponent itself: vuelize -> d-icon-button

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

When I try to get the ref of my custom ponents 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 ponent itself: vuelize -> d-icon-button

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

• javascript
• vuejs3
• ref
• vue-position-api

Share Improve this question Follow asked Sep 9, 2022 at 21:48 Daniel TerletzkiyDaniel Terletzkiy 7933 silver badges55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I think this answer might be related to your issue.

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

本文标签： javascriptHow to use a template ref on a custom component in vue 3 compositon apiStack Overflow