Subscribe on changes!

v-if directive is not working as expected when passing computed property as props

avatar
May 12th 2023

Vue version

3.3.1

Link to minimal reproduction

https://play.vuejs.org/#__DEV__eNqVUz1PwzAQ/StHlqRSSWBgCWkFYmVEMFAGkziphWNbtlOBqvx3zh9JS1WEyBD57t59PT/vk3ul8t1AkzKpTK2ZsmCoHdR6I1ivpLaw17QdodWyhxSB6e0cedgy3sRIXnjLlTpCvGiiFNUzJtoTCmAjaimMBS5Jw0QHK8BuWUu4oQsEVEWYCadBw9JecWIpWgDV+2CtFHBXc1Z/rDZJtoDVGrJDpYt4XGyS9ZPsOk7hMXiqIiSHQmGNMqKxUjxhWhW2CrhpmV+QMYzYqjiaNFkmMzMHkjFAPz1FDW3JwJFm10OQnpaQ1i4hXTqP0lKZEl7T2Cp9Q/f4BzUN20HNiTE4oq+FA7oAhtT6mfCBgmxnzpmB/X62xrEq3O0HNOwuWftj0UhhnucTriqw3+naaBr7xd0x9yOEBRVpXHYJN+rTC6AnumPC23AVfe9SN1SXcI0+IzlroNP0C0OjXzuWRWKP5PSD2km5tezVYGmzhO2/FXz+gs5eB4BrJAUVFmMeB6G0D47+719V5vMXEyZon5nIKWp2mjgLavbwfNKxJwfwhdhBC/CI4AHYZqHfVNl9Ma08NPCDuG8MtdxkJ1pKxm/hR2Ct

Steps to reproduce

  • Please visit the demo
  • Click on the "Toggle Loading" button
  • Notice changes in the preview

What is expected?

In the wrapper component, "Loading" text should be only visible if loading prop is true

What is actually happening?

In the wrapper component "Loading" is visible regardless the loading props is true or not

System Info

No response

Any additional comments?

One way i found to remedy this is to use unref inside child component

avatar
May 12th 2023

When you are passing props with render functions, refs are NOT automatically unwrapped. You are passing the raw computed ref object to the child component in Wrapper.vue, instead of the boolean value.