v-on:change randomly fails on range input bound on a computed property

[undavide]

Vue.js version

2.1.10

Reproduction Link

http://jsbin.com/bapoca/edit?html,js,console,output

Steps to reproduce

The above JSBin contains a slider (range) that logs the value of a computed property it is bound to (sliderRadius), when it changes: v-on:change="log" (log is a declared function)

What is Expected?

I would expect that each time the slider changes, the prop is logged in the console.

What is actually happening?

Two different scenarios:

• you drag and release the slider handler (aka thumb): the prop is always logged in the console (i.e. the change handler fires properly all the times)
• you directly click where you want the handler to get to: the prop isn't logged all the times (i.e. the change handler fails about in 3 out of 5 occasions).

See the animated gif below, using the provided JSBin (recorded on Google Chrome, OSX – the same happens on Safari, thought)

Thank you.

[defcc]

Thanks @undavide, seems to be a bug. I am looking into it.

[posva]

@defcc I simplified the example to make it less random: http://jsfiddle.net/posva/cm8sa7pk/
Click within the bar and you'll see

[defcc]

Thanks @posva :)

[defcc]

@posva will you please help to check this issue. I haven't got enough time to follow through these days.

[posva]

The browser seems not to be triggering the change event on purpose and we don't manually trigger a change event on our side. I'm not sure if we should, though. This needs further research.

@undavide You may be already doing this: instead of listening for the change event, watch for the slider value, it's more reliable that way

[undavide]

Actually the example I've posted was implemented in a slightly more complex scenario.

I'm building an interface to a Photoshop plugin where the user drags the slider and/or directly types a number in the stepper. A routine is run either when the user press the enter key in the stepper (easy implemented) or is done dragging the handler, i.e. he drops it.

So I don't need the routine to be constantly run while the slider (or the bound value) is onChanging, but onChange. While dragging/onChanging the number should properly be mirrored in the stepper (and this is done thanks to the 2 ways binding / v-model), while dropping/onChange, some function needs to be called.

I could perhaps implement some kind of debounce function, but it's really far from ideal in my case.

Thank you!

–Davide

[posva]

I imagined that you needed to do the computation only on release. Maybe a mouseup event works as well

[Kingwl]

maybe you should listen the input event

[yaopengli]

It seems when the value in setter and getter are different, the change event will not be triggered.

Here is same code with extra log info @undavide provided:
http://jsbin.com/bevuca/1/edit?js,console,output

[TheDutchCoder]

Just using radius as your v-model with no custom get/set will work fine, so something's wrong with your computed get/set functions.

[FSou1]

Hello guys,

I've just came across exactly the same issue with on:change="changeHandler". From my point of view it doesn't work in a proper way with Chrome.

Does it mean that it's better to use watch syntax instead?

Fail (freezing):

<input type="text" 
        placeholder="Filter by name"
        v-model="term" 
        v-on:change="changeHandler"/>

Success (works like a charm):

watch: {
    term: function(oldValue, newValue) {
        console.log(oldValue, newValue);
    }
}

Tia.