vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.66k stars 8.33k forks source link

Nest ref is not automatically unwrapped when called on element attributes #5921

Closed fxioi closed 2 years ago

fxioi commented 2 years ago

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-nksyd2?file=src%2Fcomponents%2FHelloWorld.vue&terminal=dev

Steps to reproduce

View the "custom-attr" attribute of a div

<script setup lang="ts">
const xx = useFoo();
</script>

<template>
  <div>
    <!-- custom-attr="[object Object]" -->
    <div :custom-attr="xx.loading"></div>
  </div>
</template>

What is expected?

Automatic unwrapping when calling nested ref on attributes

What is actually happening?

Not automatically unwrapped when calling nested ref on an attribute

System Info

No response

Any additional comments?

No response

liulinboyi commented 2 years ago

For now, for nested refs, you can add the .value suffix.

LinusBorg commented 2 years ago

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-templates

When refs are accessed as top-level properties in the template, they are automatically "unwrapped" so there is no need to use .value.