Vue3 Ref Value

Posted on  by admin
Modified1 year, 5 months ago.

Here's an example value for it:. If I run console.log(editItem.value), I see this object:. But when I try to read the value's author with console.log(editItem.value.author), then I see this error:. 197197 bronze badges.

1,11011 gold badge1919 silver badges4343 bronze badges. 1919 silver badges4343 bronze badges. Since the type of the ref is object | null, it could be null when you access it, leading to a runtime exception.

The error message is warning about that possibility for editItem.value.

You could either add a null-check around its access:.

..or you could simply use optional chaining:.

But you'll notice that you'll get a different warning about author not being part of the signature for object. One solution is to change the ref's type from object to a specific interface:. 1414 gold badges138138 silver badges197197 bronze badges. 197197 bronze badges. The issue (without seeing the code) seems to be that you are using ref for a object value.

While you may find some workaround to get it to work, the simplest way to deal with reactive objects is to use reactive instead of ref. One additional benefit is that you won't need to use .value when you're getting or setting the object value.

1515 gold badges8585 silver badges133133 bronze badges.

Static $refs