Vue.js 2.0 - Übergabe von Argumenten in Methoden AJAX Axios

Question

Ich muss Argumente in Methoden mit Ajax Axios übergeben.

var app = new Vue({ 
    el: '#app', 
    data: { 

     urlAdmission: 
     admissions: [ 
         { name : 'asdf'}, 
         { name : 'sd'} 
        ] 
    }, 
    mounted: function(){ 
     this.allAdmissions() 

    }, 
    methods: { 

     allAdmissions: _.debounce(function(){ 
      var app = this 
      axios.get('http://localhost/school/api/hello') 
       .then(function(response){ 
        app.admissions = response.data.admissions 
       }) 
       .catch(function(error){ 
        console.log(error) 
       }) 
     }) 
    } 
}); 

Wie Sie sehen können in bestieg ich die Methoden this.allAdmissions() aufrufen, ich brauche ein Argument übergeben, so dass ich die Funktion wiederverwenden können. Zum Beispiel this.allAdmissions ('http://localhost/school/api/hello'). Dann benutze es in axios.get ('url'). Danke

Answer 1

Es sieht so aus, als ob Sie eine Funktion erstellen möchten, die eine URL akzeptiert und die Ergebnisse der URL an einen Variablenwert in Ihren Daten bindet. Hier ist, wie Sie das tun könnten.

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

Dann, wenn Sie diese Methode wie folgt aufrufen,

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

allAdmissions die admissions Eigenschaft auf Ihre Daten an das Ergebnis des Gesprächs einstellen. Dies funktioniert, wenn Sie immer response.data.admissions verwenden möchten, weil Sie das fest programmiert haben. Wenn Sie das wollte auch variabel sein, könnten Sie in einem dritten Wert wie geben, so

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

Falls einige mehrere Ajax-Request müssen. Hier ist ein Beispiel.

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

    } 
}) 

Dank an @Bert Evans.