Having issues binding v-on:change.native in the parent component of Vue.js

Question

Having issues binding v-on:change.native in the parent component of Vue.js

I have a component that includes a checkbox input:

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

In another component, I am utilizing this component:

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

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

The goal is to link the parent component method to the children component event. However, there seems to be an issue where the change event does not trigger when the checkbox is changed.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

To ensure proper functionality with checkboxes, it is recommended to utilize the input event. Consider incorporating v-on="$listeners" in the Checkbox component unless specifying the event name as 'change' is essential.

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>

Answer 2

To ensure proper functionality with checkboxes, it is recommended to utilize the input event. Consider incorporating v-on="$listeners" in the Checkbox component unless specifying the event name as 'change' is essential.

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>

Answer 3

Answer №2

The .native modifier is specifically for components, not native widgets.

At times, you may need to directly listen to a native event on the root element of a component. In such cases, the .native modifier for v-on comes in handy.

You have the option to use .native in the outer binding to capture the change event bubbling from the inside (as native events usually bubble, unlike Vue events), or utilize non-.native events in both inner and outer components to handle your own bubbling.

Below snippet demonstrates both approaches:

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>

Answer 4

The .native modifier is specifically for components, not native widgets.

At times, you may need to directly listen to a native event on the root element of a component. In such cases, the .native modifier for v-on comes in handy.

You have the option to use .native in the outer binding to capture the change event bubbling from the inside (as native events usually bubble, unlike Vue events), or utilize non-.native events in both inner and outer components to handle your own bubbling.

Below snippet demonstrates both approaches:

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>

Having issues binding v-on:change.native in the parent component of Vue.js

Answer №1

Answer №2

Similar questions

Guide to adding table classes to AJAX response tables

When attempting to use jQuery to click on a button that triggers an ajax callback, the functionality does not

What methods can I use to locate the circular dependency within my program?

Using MomentJS along with Timezones to accurately display Datetime while accounting for offsets

In Chrome, there is a conflict between the screen width when using `position: absolute` and `position: fixed` if there is vertical

Experiencing an issue with excessive re-renders in React as it restricts the number of renders to avoid getting stuck in an infinite loop while attempting to

Incorporating a JavaScript object into a DataTables JSON structure: A practical guide

There was an error connecting to Pusher on the staging environment, yet everything seems to be functioning properly on localhost

I require a way to decelerate the speed of the roulette wheel's rotation

What is the best way to know which API will return the result the fastest?

Matrix calculation for bone orientation towards an object in Three.js

Utilizing AngularJS "controller as" syntax within templates

What are the steps involved in converting a MERN application into a desktop application?

Retrieving the output from a nested scope within a function

What is the most efficient method for fetching data from the server at regular intervals of 30 minutes?

What are some ways to prevent a submit event from occurring?

struggling to send JSON data to PHP using AJAX

Having trouble retrieving data from getters in the Vue store while inside a template

Identifying scrolling within the tbody element in a Vue component

Find the position of an HTML5 canvas element within a webpage