type of reactive collection values is abnormal
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
1.create reactive map
const books = reactive(new Map([
['The Little Prince', { price: ref(1) }],
['The Wonderful Wizard of Oz ', { price: ref(2) }],
]))
2.show
<div v-for="[name,info] in books" @click="onClick(name,info.price)"><!-- success!but type error -->
{{name}}:{{info.price}}
</div>
3.add click event to print book's name and price
const onClick = (name:string,price:number) => {
console.log(name+"'s price is:"+price)
}
What is expected?
info.price type should be number
What is actually happening?
Argument of type 'Ref<number>' is not assignable to parameter of type 'number'
System Info
No response
Any additional comments?
No response
price is already reactive, you probably shouldn't make them refs. Specifically this part seems relevant (https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1):
This rule applies to nested objects as well. Due to deep reactivity, nested objects inside a reactive object are also proxies:
@TheDutchCoder Thanks for your reply When i explicit add reactive for map values,The type is correctly playground
const books = reactive(new Map([
['The Little Prince', reactive({ price: ref(1) })],
['The Wonderful Wizard of Oz ', reactive({ price: ref(2) })],
]))
priceis already reactive, you probably shouldn't make them refs. Specifically this part seems
In my project,I want to provide a computed for price,It seems I should use watch in your example
@Teiiiiiio I don't think so?
Anyway, I think this is just normal behaviour. I personally never use reactive, ref is so much easier imo.
@TheDutchCoder sorry,i didn't make myself clear playground
I think this is just normal behaviour
I think so too,but when i not explicit add reactive,type is unautomatically unwrapped,In fact, it has automatically unwrapped in line 40