Version

3.2.4

Reproduction link

SFC

Steps to reproduce

I'm trying to create an array of objects, some of the fields in which will be refs and will be updated in the future. The problem is that when you insert this data into the template, quotation marks appear around the text

What is expected?

Plain string

What is actually happening?

Quoted string

You can put the array in a ref as a workaround

This isn't technically a bug, or is it? the items array is nonreactive, so refs are not unwrapped. The correct way to print the content in the template would be:

<li v-for="(item, index) of items" :key="index">{{ item.label.value }}</li>

...and this renders the desired result. Alternatively, wrapping the array in reactive() also achieves the correct output.

If we leave out the quotation marks, we are essentially trying to convert an object (the ref) to the template, which happens with JSON.stringify because refs don't have a .toString() method.

Because this ref only contains a string, it ends up being printed as a JSON string, with quotation marks. would the ref contain an object, we would print a JSON object representation, see this playground

Maybe we can improve the behavior of toDisplayString here, but i wouldn't say that this is a bug, necessarily, as there is a proper way to achieve the desired result.

We could argue that printing a ref to the template like in the original repro is a mistake, so we should maybe even throw an error/warning to make the developer aware of it? or should we try and work with what we got and print a proper string even though the usage might have been a mistake? Or do we see this as a convenience behaviour?

If you make the array a link, it still does not give the desired result (see this playground). As I understand is that only the top ref is unwrapped, but not nested. Correct?

the return value of the new computed that you introduced is still a plain array (computed doesn't "reactive-fy" its return values, never has). Which will not be unwrapped.

ah! you are right @LinusBorg I thought it would output { "value": "..." }

@LinusBorg

Reading this issue, I'm unsure if the following example is technically a bug:

See playground

Why do the normal computed work in the template without .value, but for the myComputedFn I need myComputedFn().value in the template ?

@m0dch3n @LinusBorg - I just ran into this as well. Was definitely unexpected.

Seems worth reopening for this specific case of function calls?