V-model not dynamically binding values

I am new to VUE but I am loving it so far and I need help.

I have the following code from a book. The products variable gets assigned in the “created” event and is dynamically binding to the input elements. However, if I change the input elements value, it seems that the v-model does not actually update back the product.name (or any of the property of product), so if I assign blank on the name input field, it gets accepted. Updating it the second time cannot be done because product.name is now set to “” which makes $.$dirty to true. Any idea why the v-model in the input elements does not update the this.product?

{{editMode ? "Edit" : "Create Product"}}

Values Required for All Fields
Value Model: {{$v.product.$model.name }}
Variable Model: {{product.name}}

ID (Not Editable)
Name
Description
Category {{cat}}
Price
Cancel {{editMode ? "Save Changes" : "Store Product"}}

You have to set it through the model object. Can you make a jsfiddle with a recreation?

Show the code where you set/change the value

Yes sir. If that is the case, what changes should I make so that the input values are validated instead of the this.product value?

  • Sorry for the noob question, still studying VueJS

https://jsfiddle.net/sheenlim08/m4hotsay/

1 Like

I’ll check it out soon sorry

I was able to overcome my issue by reading the reactivity in depth page: https://vuejs.org/v2/guide/reactivity.html

So I have updated the created function to the following content (see below)

https://jsfiddle.net/sheenlim08/5ewkhvo1/

I’m still new to Vue so if this code is a bad practice or have a better solution, do let me know so I can examine it and learn more. Thanks guys and gals.