自定义 Vue.js AJAX 指令 onSuccess 处理答案

【问题标题】：Custom Vue.js AJAX directives onSuccess processing自定义 Vue.js AJAX 指令 onSuccess 处理
【发布时间】：2017-02-17 12:48:04
【问题描述】：

我已经为 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
                });
            }
        );
    },
});

我在各种组件中使用它，以这种形式：

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

我希望为组所在的组件调用 addGroup 方法，并将数据作为参数传递...

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

通过这种方式，我可以将任何表单转换为 AJAX 提交，并且可以为每个组件以不同的方式处理数据。这可能吗？

【问题讨论】：

标签： vue.js vue-component

【解决方案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
})

【讨论】：