[Vuejs]-V-on:change.native doesn't bind in the parent component: Vue.js

by

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>
👤David Weldon

1👍

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>
👤Roy J

Leave a comment