自定义vue.js ajax指令启用核能处理

Question

我已经为Ajax表单设置了自定义VUE指令，但是我希望它可以处理带有接收到的数据的自定义OnSuccess调用...

指令看起来像这样：

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
                });
            }
        );
    },
});

im以这种形式以各种组件使用它：

<form method="POST" action="api/groups" v-ajax="customFunction"></form>

我想要addGroup方法，以将组为参数传递的组件...

Vue.component('x',{
    methods: {
        customFunction: function(data) : { }
    }
});

通过这种方式，我将能够将任何形式变成AJAX提交，并有可能对每个组件的数据进行不同的处理。这可能吗？

Answer 1

您的指示需要多个值a callback function和data，并且将来可能会加起来。将您的指示分配给对象字面。

<form method="POST" action="api/groups" v-ajax="{successCb: customSuccessFunction, errorCb: customErrFunction, data: data}">
</form>

在您的指令中，您可以按以下

访问它们

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
})