カスタムVue.js AJAX指示するonSuccess処理

Question

...

は、ディレクティブは次のようになります。

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> 

Iグループが渡されたデータとなっている成分を求め前記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 
})