Vue.js 2.0 - 在方法中传递参数 AJAX Axios

Question

我需要在使用 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)
                })
        })
    }
});

正如您在 mounted 中看到的那样，我调用方法 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。

Vue.js 2.0 - 在方法中传递参数 AJAX Axios

Vue.js 2.0 - Passing arguments in methods AJAX Axios

ajax

vue.js

axios