2.5.17
https://jsfiddle.net/sday/eywraw8t/411036/
run the fiddle example and click on increment age. Both ages change. If you change the age manually through the input element, only the age that is bound through v-model as a simple variable has the setter called.
I would expect that if I change the value bound through the v-model with the input element, that the setter for that v-model would be called.
Only the setter for the simple variable is called when changing the value through the input element.
Just trying to make a grid component that is unaware of the data key names so I needed a way to dynamically and generically handle any data object. I wanted a way to bind each INPUT element to a generic getter/setter so I can handle my own backend calls. Looks like I will probably just do it using a method. Pass the data into component through a read only prop. Any changes made via INPUT element will be sent back to parent through an event to persist the data and push the committed value back through the prop.
This is expected, the setter gets called only when doing person = {}
That seems inconsistent. Binding a v-model to a property of an object seems common yet has different behavior than just a simple variable.
Somehow I have it working properly like this:
computed:{
changed(){
if (this.list.length!=this.tmp_list.length) return true
if (this.tmp_list.find(tmp_item=>{
const item = this.list.find(item=>item.id==tmp_item.id)
if (!item) return true
return !deepEq(item,tmp_item)
}) return true
return false
}
}
And it works every time even is some nested field in a tmp_item in tmp_list changes. Maybe because I call .find on tmp_list, in which change is expected? Or maybe smth with deepEq.
Most helpful comment
That seems inconsistent. Binding a v-model to a property of an object seems common yet has different behavior than just a simple variable.