Vue, change native event not working, input native does

Question

I have a question and maybe a Vue bugg.

I have a custom component that needs a @change.native event. But it does not trigger anything and I could not find anything about this issue myself.

So i tried some different stuff and like @click.native and @input.native does work. Even tho @input.native works and do the trick i want to, i still want to know why the change event does not work.

Anybody? Else I should report this.

Vue version: 2.5.2

<custom-input type="search" 
              placeholder="search" 
              v-model="search" 
              @input.native="change" />

Here's an example implementation of your custom-input where the change event is handled as expected: jsfiddle.net/p8v2adyt/1 — thanksd
– thanksd, Commented Sep 10, 2018 at 14:32
Ah nvm my mistake. So it does work, but i should unfocus the input (click somewhere outside the input) to make it trigger. My mistake of understanding the change event. — Niels Lucas
– Niels Lucas, Commented Sep 10, 2018 at 14:57

therufa · Accepted Answer · 2018-09-10 14:35:11Z

2

If the <input /> inside the custom component is a child element of another element, then the event listener bound by the .native modifier will not be reached, since it is listening to the event of a different element.

custom-input.vue:

<template>
    <div>
        <input :value="someValue" />
    </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

so if you have this scenario, then the @change.native will be bound on the <div> (the wrapper). (sadly) You need to manually propagate the event manually.

answered Sep 10, 2018 at 14:35

therufa

2,0412 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niels Lucas Over a year ago

Ah nvm my mistake. So it does work, but i should unfocus the input (click somewhere outside the input) to make it trigger. My mistake of understanding the change event.

Collectives™ on Stack Overflow

Vue, change native event not working, input native does

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related