Vue.js 2.0 - Passing arguments in methods AJAX Axios

Question

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

All you need is _.debounce(function(url){}, delay). Debounce will pass along the parameters. — Bert
– Bert, Commented Mar 26, 2017 at 2:00
Can i pass it like this.allAdmission('htpp://localhost/school/api/hello') then invoke it using _.debounce(function(url), 500). Is this correct? — Rbex
– Rbex, Commented Mar 26, 2017 at 2:12
Are you trying to create a function that can be reused or just make sure that the function will only execute once every half a second? — Bert
– Bert, Commented Mar 26, 2017 at 2:13

Bert · Accepted Answer · 2017-03-26 15:31:38Z

2

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

answered Mar 26, 2017 at 15:31

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rbex Over a year ago

Yeah it's working now. I just added var app=this and app[value]=response.data.admissions but I know it will work on the third paramater. Thank you so much for not giving up! You're a rockstar!

Rbex · Accepted Answer · 2017-03-27 04:15:43Z

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.

Collectives™ on Stack Overflow

Vue.js 2.0 - Passing arguments in methods AJAX Axios

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related