Vue.js 2.0 - メソッドの引数を渡すAJAX Axios

Question

ajax axiosを使用するメソッドで引数を渡す必要があります。

私はthis.allAdmissions（）メソッドを呼び出しています。この関数を再利用できるように、引数を渡す必要があります。たとえば、this.allAdmissions（ 'http://localhost/school/api/hello'）です。次に、axios.get（ 'url'）で使用します。ありがとう

Answer 1

あなたがしようとしているように見えるのは、URLを受け取り、URLの結果をデータの変数値にバインドする関数を作ることです。ここでそれをどうやって行うのかです。

methods: { 
    allAdmissions: _.debounce(function(url, value){ 
    axios.get(url) 
     .then(function(response){ 
     this[value] = response.data.admissions 
     }.bind(this)) 
     .catch(function(error){ 
     console.log(error) 
     }) 
    }) 
} 

あなたは、このようにそのメソッドを呼び出した場合次に、

this.allAdmissions('http://localhost/school/api/admissions‌​', "admissions") 

allAdmissionsはあなたの呼び出しの結果に自分のデータにadmissionsプロパティを設定します。これはハードコーディングされているので常にresponse.data.admissionsを使用したい場合に有効です。それを可変にしたい場合は、

methods: { 
    getSomeData: _.debounce(function(url, value, responseValue){ 
    axios.get(url) 
     .then(function(response){ 
     this[value] = response.data[responseValue] 
     }.bind(this)) 
     .catch(function(error){ 
     console.log(error) 
     }) 
    }) 
} 

Answer 2

複数のajaxリクエストが必要な場合もあります。ここに例があります。

var app = new Vue({ 
    el: '#app', 
    data: { 
     value: '', 
     admissions: [], 
     schoolyear: [] 
    }, 

    created: function(){ 

     this.ajaxAll() 

    }, 
    methods: { 

     ajaxAll: _.debounce(function(){ 
      var app = this 
      var admissions = 'admissions' 
      var schoolYear = 'schoolyear' 
      axios.all([this.getAllData('http://localhost/school/api/admissions', 'admissions'), this.getAllData('http://localhost/school/api/schoolyear', 'schoolyear')]); 


     }), 

     getAllData: function(url, value){ 
      var app = this 
      return axios.get(url) 
       .then(function(response){ 
        app[value] = response.data[value] 
        console.log(response.data.admissions) 
       }) 
     } 

    } 
}) 

@Bert Evansに寄稿しました。