fix: Ref or computed inside non-wrappable variables (objects, arrays) should return a string without quotes(#5578) #5593
Conversation
… should return a string without quotes(vuejs#5578)
|
✔️ Deploy Preview for vue-sfc-playground ready! 🔨 Explore the source changes: 4d3d0d6 🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-sfc-playground/deploys/6231a7aea7b45c0009a09d74 😎 Browse the preview: https://deploy-preview-5593--vue-sfc-playground.netlify.app/ |
|
✔️ Deploy Preview for vuejs-coverage ready! 🔨 Explore the source changes: 4d3d0d6 🔍 Inspect the deploy log: https://app.netlify.com/sites/vuejs-coverage/deploys/6231a7ae9fb66100087d3e17 😎 Browse the preview: https://deploy-preview-5593--vuejs-coverage.netlify.app |
|
✔️ Deploy Preview for vue-next-template-explorer ready! 🔨 Explore the source changes: 4d3d0d6 🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-next-template-explorer/deploys/6231a7ae7c9dc00008fc31d7 😎 Browse the preview: https://deploy-preview-5593--vue-next-template-explorer.netlify.app |
|
I'm no sure that this is the right kind of solution to the issue. While it gets rid of the quotes, it might lead to even more confusion: <script setup>
import { ref } from 'vue'
const obj = {
flag = ref(false)
}
</script>
<template>
<div v-if="obj.flag">
this should be hidden but isn't, because `obj.flag` returns the ref, not the ref's value
</div>
<!-- the following will print `false`, giving the impression that `obj.flag` is returning the boolean value -->
<p>{{ obj.flag }}</p>
</template> |
| export const toDisplayString = (val: unknown): string => { | ||
| export const toDisplayString = (val: any): string => { | ||
| //fix #5578 | ||
| if (val && val.__v_isRef) { |
|
Thanks a lot for the PR - please see #7306 (comment) |
fix: Ref or computed inside non-wrappable variables (objects, arrays) should return a string without quotes(#5578)