Vue - How to add an onChange listener to the autocomplete

[tamb]

I can't seem to hook into the native DOM 'change' event with Vue. How do I do this? I've tried @change and putting a method in there. But it's not working.

[trevoreyre]

The @change event should work the same as with a regular input element. Can you provide a code sample of what you're trying that isn't working? Maybe in a CodeSandbox or a CodePen?

[trevoreyre]

Here's an example using the @change event that might help. It's worth noting that on an input element the change event doesn't fire until the element loses focus. Check out the MDN docs for more details.

I'm going to go ahead and close this. Feel free to re-open if it's not working for you.

[tamb]

I really feel that onSubmit should be handled on the change event. The example you provided doesn't handle the complex objects that onSubmit handles.

I fI need access to the object I can't get it from e.target.value

[trevoreyre]

Yeah, that's a good point. I'm going to re-open this issue so I can more fully address it in v3.

[bronthulke]

I have multiple, dynamic autocompletes on my page, and need to be able to identify which autocomplete input it came from, so I can update the relevant model data.

This usage of the blur event is the only way that I can think of that I could do this at this stage, until v3 comes out when I can potentially use v-model.... would you agree? I'm thinking that I would use the event.target to get an data attribute from the element that can identify which autocomplete input is being changed, and then update my data based on that. It's awful because I'll be leaking the DOM into my code, but I can't see any way to avoid this?

I thought this was a good place to put this question since I think it's related to the use of the blur listener, but if you would prefer I raise a new ticket just smack me on the wrist and I will do it :)

[titusdecali]

I agree with the other opinions here. Limiting to @blur is really troublesome and I haven't had this issue with other form libraries like vue-formulate. @change should fire the second the value changes.