I have a component vue-datetimepicker
that has the following :
export default {
name: 'vue-datetimepicker',
data () {
return {
value: ''
}
},
watch: {
options: function (options) {
// update options
$(this.$el).datetimepicker({ data: options })
}
},
mounted: function () {
var vm = this
var mycomp = $(this.$el).datetimepicker({})
mycomp.on('dp.change', function (e) {
vm.value = e.date
vm.$emit('change', vm.value)
})
},
destroyed: function () {
$(this.$el).off().datetimepicker('destroy')
}
}
and from the parent component form-preview.vue
I am trying to capture it.
created() {
this.$on('change', function(id){
console.log('Event from parent component emitted', id)
});
},
mounted: function() {
},
I am expecting when I change datetime It should emit the change event. But nothing is getting printed in the console.
this.$on
will listen for events emitted by the same component. To listen for events emitted by a child component you should assign an event listener on the child component in the template section of the parent component. So in the template section ofform-preview.vue
you should have something like this ..Then in the script section in the parent component you can define your
handleChange
event handler ..Note that the event handler will automatically receive any data emitted with the event. If you want to make it explicit you can use
@change="handleChange($event)"