Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating the bound property with same event dooesn't work #10870

Closed
chulman444 opened this issue Nov 27, 2019 · 5 comments

Comments

@chulman444
Copy link

@chulman444 chulman444 commented Nov 27, 2019

Version

2.6.10

Reproduction link

https://jsfiddle.net/x1rhwz97/2/

Steps to reproduce

Modify the value in the text ('hey'). Click on somewhere else to trigger @change event handler. It updates to 'reset'.

Modify this value 'reset', which was 'hey', then click on somewhere else to trigger @change event handler again. It doesn't update to 'reset'. I want to trigger the @change event the second time.

What is expected?

I expect that the @change event is triggered continuously.

What is actually happening?

It doesn't seem to get triggered.


But then, it comes back when you click on the button, where it updates the value to "resetByButton", then you modify this value, it changes to "reset". But the error is persistent unless it's modified by the button event again.

OR, you can remove the comment around the counter in onEvent, and the event does get triggered all the time. And it even works with @change changed to @input, where it wouldn't allow the value "reset" to be modified which is what is expected.

I tried updating the this.val with this.$set(this, 'val', "reset") but it doesn't work either. Doesn't work with this.$nextTick or setTimeout either.

So ... do I have to update another unused property or something for this to work?

@chulman444

This comment has been minimized.

Copy link
Author

@chulman444 chulman444 commented Nov 27, 2019

And apparently, when you remove the comment around the counter in onEvent and comment OUT the this.value, it seems to increase the counter as expectedly, without updating the this.val.

@chulman444

This comment has been minimized.

Copy link
Author

@chulman444 chulman444 commented Nov 27, 2019

Having $forceUpdate after modifying this.value works, but then ... I actually want to make it work with Vuetify component v-text-field. But it doesn't work with any of the events @change, @input, @blur.

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Nov 27, 2019

It may look weird but this is working as expected:

When vue renders a templates, it applies all interpolations and v-bind. For a template to rerender, a value used in the template must change. That's why the first time we click outside of the input, the change triggers onEvent, changing the value bound to the input, which triggers a render with the new value. After that, val value doesn't change, so no re rendering happening, leaving the input as is.

In order to always re render, call this.$forceUpdate inside onEvent

@posva posva closed this Nov 27, 2019
@sirlancelot

This comment has been minimized.

Copy link
Contributor

@sirlancelot sirlancelot commented Nov 27, 2019

If you examine the component, you will notice that val doesn't change as text is typed in to the input field. So even though @change is firing, the value of val is already "reset" which means nothing has changed. You probably want to use v-model on the input box instead.

@chulman444

This comment has been minimized.

Copy link
Author

@chulman444 chulman444 commented Nov 27, 2019

@sirlancelot

Thanks, I tried your approach. Using v-model allows me to not use this.$forceUpdate: https://jsfiddle.net/md9o2tvy/


What I wanted to achieve beyond my issue was doing this in Vuetify v-text-field but the suggested solutions don't seem to work in Vuetify.

Here is the Vuetify solution:

Using v-model and this.$nextTick. Using this.$nextTick, :value and this.$forceUpdate pair doesn't work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.