Custom Vue.js AJAX directives onSuccess processing - vue.js

Question

I have setup a custom Vue directive for ajax forms, however I would like it to process a custom onSuccess call with the received data...
The directive looks like this:
Vue.directive('ajax', {
bind: function (el, binding, vnode) {
el.addEventListener(
'submit', function(e){
e.preventDefault();
let formData = new FormData(el);
let method = el.method.toLowerCase();
Vue.http[method](el.action, formData).then(response => { // success callback
data = response.data;
// Do a custom callback for binding.expression
}, response => {
// error callback
});
}
);
},
});
And im using it in various components, in this form:
<form method="POST" action="api/groups" v-ajax="customFunction"></form>
I would like the addGroup method called for the component in which the group is with data passed as a parameter...
Vue.component('x',{
methods: {
customFunction: function(data) : { }
}
});
In this way I would be able to turn any form into AJAX submit, with the possibility to process the data differently for each component. Is that possible?

Answer 1

Your directive needs multiple values a callback function and data and may add up in future. Assign your directive to object literal.
<form method="POST" action="api/groups" v-ajax="{successCb: customSuccessFunction, errorCb: customErrFunction, data: data}">
</form>
In your directive you can access them as below
Vue.directive('ajax', function (el, binding) {
console.log(binding.value.successCb.color) // => customSuccessFunction
console.log(binding.value.errorCb.text) // => customErrFunction
console.log(binding.value.data) // => data object
})