this.$http.get 在方法 vue js 中不起作用答案

【问题标题】：this.$http.get is not working inside methods vue jsthis.$http.get 在方法 vue js 中不起作用
【发布时间】：2017-06-23 04:07:34
【问题描述】：

我正在使用 Laravel + spark + vue js。

刀片文件

<draggable class="col-md-12" :list="emergencies" :element="draggableOuterContainer" @end="onEnd">

js文件

import draggable from 'vuedraggable'
module.exports = {
data() {        
    return {
        emergencies:[]
    };
},
components: {
    draggable,
},
created() {
    this.getEmergencies();
},
methods: {
    getEmergencies() {
        this.$http.get('/ajax-call-url')
            .then(response => {
                this.emergencies = response.data;
            });
    },        
    onEnd: function(evt){
        var counter = 1;
        this.emergencies.forEach(function(user, index) {
            this.$http.get('/ajax-call-url/')
            .then(response => {   
            });    
            counter++;  
        });
    }
}
};

在这里我有拖放，在拖放时，我调用“onEnd”函数并出现以下错误。

TypeError: 这是未定义的

这里 this.emergencies.forEach 正在工作，但在 this.$http.get 上出现错误

有什么建议，有什么解决办法？

【问题讨论】：

标签： vuejs2 vue-component laravel-spark

【解决方案1】：

不要使用函数语法，而是使用箭头函数，因为 this 的范围会在函数内部发生变化：

onEnd: function(evt){
    var counter = 1;
    this.emergencies.forEach((user, index) => {
        this.$http.get('/ajax-call-url/')
        .then(response => {   
        });    
        counter++;  
    });
}

查看this 以获得解释。

【讨论】：