v-on:change.native doesn't bind in the parent component: Vue.js

Question

I have a component with checkbox input:

<template>
    <input id='one' type='checkbox' v-on:change.native="$emit('change')" />
</template>

I am using this component in another component:

<template>
....
    <Checkbox v-on:change="change" />
....
</template>
<script>
    import Checkbox from './components/Checkbox.vue'

    export default {
        components: {
            Checkbox
        },
        methods: {
            change: function (e) { 
                console.log(e);
        },
    }
</script>

What I want is to attach parent component method, which must point to children component event. The problem is that this change event doesn't trigger when checkbox is changed.

tony19 · Accepted Answer · 2022-07-15 22:59:45Z

2

You need to use the input event for checkboxes. I'd also recommend using v-on="$listeners" in the Checkbox component unless you really need to name the event 'change'.

Checkbox.vue

<template>
  <input
    type="checkbox"
    v-on="$listeners"
  >
</template>

index.vue

<template>
  <Checkbox @input="input" />
</template>

<script>
import Checkbox from '~/components/Checkbox.vue';

export default {
  components: {
    Checkbox,
  },
  methods: {
    input(e) {
      console.log(e);
    },
  },
};
</script>

edited Jul 15, 2022 at 22:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 30, 2018 at 20:44

David Weldon

64.4k11 gold badges152 silver badges146 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 22:41:12Z

The .native modifier is used on components, not on native widgets.

There may be times when you want to listen directly to a native event on the root element of a component. In these cases, you can use the .native modifier for v-on

You could use .native in the outer binding to catch the change event bubbling from the inside (because native events generally bubble, while Vue events do not), or you could use non-.native events in both the inner and outer components to do your own bubbling.

The snippet below does both:

new Vue({
  el: '#app',
  methods: {
    change() {
      console.log("Native change");
    },
    change2() {
      console.log("Non-native");
    }
  },
  components: {
    myCheckbox: {
      template: '#inner-template'
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<template id="inner-template">
    <input id='one' type='checkbox' v-on:change="$emit('change')" />
</template>
<div id="app">
  <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
</div>

Collectives™ on Stack Overflow

v-on:change.native doesn't bind in the parent component: Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related