this.$http.get не работает внутри методов vue js

Я работаю с 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
person Jass    schedule 06.02.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вместо использования синтаксиса функции используйте стрелочные функции, так как объем этих изменений внутри функции:

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

Проверьте это для объяснения.

person Saurabh    schedule 06.02.2017