Vue: setter for computed property does not get called by INPUT element change when v-model references a property of an object?

Created on 10 Oct 2018  路  3Comments  路  Source: vuejs/vue

Version

2.5.17

Reproduction link

https://jsfiddle.net/sday/eywraw8t/411036/

Steps to reproduce

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.

What is expected?

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.

What is actually happening?

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.

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.

All 3 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

asiFarran picture asiFarran  路  34Comments

karevn picture karevn  路  36Comments

yyx990803 picture yyx990803  路  36Comments

cherry-geqi picture cherry-geqi  路  35Comments

karevn picture karevn  路  42Comments