定製Vue.js AJAX指令的onSuccess處理

我已經安裝了一個自定義的Vue指令對Ajax的形式，但是我想它來處理自定義的onSuccess與接收到的數據調用...定製Vue.js AJAX指令的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提交，與以不同的方式處理數據爲每個組件的可能性。那可能嗎？

來源

2017-02-17 GTMeteor

您的指示需要多個值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 
})

來源

2017-02-17 13:59:49

定製Vue.js AJAX指令的onSuccess處理

回答

相關問題