Vue.component('rating-edit', {
template:`
<form>
<input v-model="rating.title" type="text">
<textarea v-model="rating.remark">{{rating.remark}}</textarea>
<button type="button"
@click="submit">
Save
</button>
</form>`,
props:['rating'],
methods: {
submit: function submit () {
let rating = this.rating;
this.$emit('submit', rating);
console.log('submit was emitted');
}
}
});
const aRating = {
title: 'title',
remark: 'remark'
};
let vueApp = new Vue({
el: '#rating-edit-container',
data: {
rating: aRating
}
});
vueApp.$on('submit', function(rating) {
console.log('vue on submit', rating);
});<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="rating-edit-container">
<rating-edit :rating="rating"></rating-edit>
</div>In an older front-end code, I aim to incorporate a Vue-based modular form and retrieve the data when submitted.
This is the component's code. Please take note of the submit function triggering this.$emit('submit', rating);
let result = {
props:['rating'],
methods: {
submit: function submit () {
let rating = this.rating;
this.$emit('submit', rating);
console.log('submit triggered');
}
}
};
export default result;
And now in the old code, I am listening for the events:
import Vue from 'vue';
import ratingEditVue from './rating-edit.vue';
Vue.component('rating-edit', ratingEditVue);
const aRating = {
title: 'title',
remark: 'remark'
};
let vueApp = new Vue({
el: '#rating-edit-container',
data: {
rating: aRating
}
});
vueApp.$on('submit', function(rating) {
console.log('vue on submit', rating);
});
Based on my understanding of Vue events, this setup should function correctly. However, $on('submit', handlerFunction) never seems to be invoked.
Addendum:
I've made adjustments to the example. Apologies for not doing so initially.