Using object properties in v-model?

I'm trying to learn about Vue and see if it's a worthwhile system to use.
I'm exclusively ignoring the Options API and using the Component API.

When I try to use v-model="object.property", I get warnings in the console about "invalid prop" and the text value on the html is "[object Object]". This makes no sense to me as I'm still just using a ref().

What is happening?

If I change it to "object.property.value", it appears to work just fine. Is this really how we're supposed to use this?

Comments

[Adnan Rizvan]

This is one of those posts where you'd get replies sooner - had you included at least some pseudo-code.

In general, within the template, you shouldn't have to access the value property on any of the reactive attributes in vue.

For example, if you have this object defined:
const obj = ref({ a: 1, b:2 })

You simply reference the property in that object that you want to bind:
v-model="obj.a" // correct usage

You would get the [object Object] output however, if you used it incorrectly:
v-model="obj" // incorrect usage

Unless you're using script setup, perhaps doublecheck how you're returning the properties you want to bind.

Otherwise - would need to see the actual code to reproduce the problem :)

Best of luck!

[Pugsworth]

You know, through the frustration I've been having, I completely overlooked having the entire object be a ref rather than each property being a ref. Duh!

This is my first time on this website due to the the recommendations from Vue developers due to the Reddit blackouts.
I didn't really think to add any code snippets. I figured it was small enough to kinda be self describing, but this is ultimately what I was attempting to do:

const object = {
  prop1: ref(""),
  prop2: ref(0)
};

/* Later in the template */

<input v-model="object.prop1"/>

I still don't understand why what I was trying doesn't work. I'd like to understand why.
Is it due to the way the compiler processes the templates?

Thank you for the help!

[Adnan Rizvan]

Ultimately, it comes down to a ref unwrapping caveat.

Ref unwrapping in templates only applies if the ref is a top-level property in the template render context.

Read more in the official docs

Note the following:
The rendered result will be [object Object]1 because object.id is not unwrapped when evaluating the expression and remains a ref object. To fix this, we can destructure id into a top-level property

So in your case it would have to be destructured as:

const { prop1 } = object

[Adnan Rizvan]

Hope this helps you understand it better.

Regardless, props (pun intended) to you for actually wanting to understand why/how certain things are done.

[Pugsworth]

Yes, that actually makes sense!
I must have skipped that part of the docs when I was skimming for information.

I feel like if I don't understand how some things work in a system, I'm subsequently left guessing when I run into issues.

[David Sugar]

Although I have been scrounging around working with templating for an admin console, I had considered using something like vue. I just did not want to wait to get development moving to learn something else new, especially now being blind, and have no help with that.