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

Multi tool use
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.
javascript vue.js vuejs2 vue-component
add a comment |
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.
javascript vue.js vuejs2 vue-component
add a comment |
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.
javascript vue.js vuejs2 vue-component
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.
javascript vue.js vuejs2 vue-component
javascript vue.js vuejs2 vue-component
asked Dec 30 '18 at 20:28
gdfgdfggdfgdfg
667923
667923
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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>
add a comment |
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>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981181%2fv-onchange-native-doesnt-bind-in-the-parent-component-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
add a comment |
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>
add a comment |
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>
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>
answered Dec 30 '18 at 20:44
David WeldonDavid Weldon
51.5k7119125
51.5k7119125
add a comment |
add a comment |
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>
add a comment |
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>
add a comment |
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>
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>
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>
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>
answered Dec 30 '18 at 20:56


Roy JRoy J
26.6k33158
26.6k33158
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981181%2fv-onchange-native-doesnt-bind-in-the-parent-component-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
TndLt,d tL Yfg2F,MRhCeIrO6w,USqoN,NNPK 0MySC PDPv,DHoWL2UpFMICeP7r,gW4 a7VUUHlivM9MF3eOEYx8h1kggQ,W