CODEWITHSUNDEEP
ajaxvue.jsaxios
Rbex
Rbex

Reputation: 1539

Vue.js 2.0 - Passing arguments in methods AJAX Axios

I need to pass an arguments in methods using ajax axios. 

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

As you can see in mounted I call the methods this.allAdmissions() I need to pass an argument so that I can reuse the function. For example this.allAdmissions('http://localhost/school/api/hello'). Then use it in axios.get('url'). Thanks

Upvotes: 3

Views: 2296

Answers (2)

Rbex
Rbex

Reputation: 1539

In case some will need multiple ajax request. Here is an example.

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

    }
})

Credit to @Bert Evans.

Upvotes: 0

Bert
Bert

Reputation: 82489

It looks like what you're trying to do is make a function that can accept a url and bind the results of the url to a variable value in your data. Here is how you might do that.

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

Then, if you call that method like this,

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

allAdmissions will set the admissions property on your data to the result of your call. This works if you always want to use response.data.admissions because you hardcoded that. If you wanted that to be variable as well, you might pass in a third value like 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) 
      }) 
  })
}

Upvotes: 2

Related Questions