DEV Community

Using object properties in v-model?

Pugsworth on July 10, 2023

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. Wh...
Read full post
Collapse
 
rizvanadnan profile image
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!

Collapse
 
pugsworth profile image
Pugsworth • • Edited

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"/>
Enter fullscreen mode Exit fullscreen mode

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!

Collapse
 
rizvanadnan profile image
Adnan Rizvan • • Edited

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
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
rizvanadnan profile image
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.

Thread Thread
 
pugsworth profile image
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.

Collapse
 
dyfet profile image
David Sugar • • Edited

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.