vue js возвращаемое значение дает неопределенную ошибку

Question

Я хочу проверить возвращаемое значение $ http.get(), но я получаю неопределенное значение. Вот мой вю код JS:

var vm = new Vue({ 
    el: '#permissionMgt', 
    data: { 
     permissionID: [] 

    }, 

methods:{ 
fetchPermissionDetail: function (id) { 
      this.$http.get('../api/getComplaintPermission/' + id, function (data) { 

        this.permissionID = data.permissionID; //permissionID is a data field of the database 
        alert(this.permissionID); //*****this alert is giving me undefined value 

      }); 
     }, 

} 
    }); 

Можете ли вы сказать мне, вот проблема здесь .. кстати $ http.get() правильно получения всех данных.

Answer 1

Вы должны проверить, какой тип является data возвращается с сервера. Если решение @ Raj не разрешило вашу проблему, то, вероятно, permissionID нет в возвращаемом data.

Сделайте colsole.log(data) и проверить data является object или array из objects.

Cheers!

Answer 2

Его общая ошибка js. Внесите следующие изменения, и он будет работать.

fetchPermissionDetail: function (id) { 

     var self = this; //add this line 
     this.$http.get('../api/getComplaintPermission/' + id, function (data) { 

       self.permissionID = data.permissionID; //replace "this" with "self" 


      }); 
     }, 

} 

причина this указывает на window внутри анонимной функции function()

Это хорошо известная проблема JS. Если вы используете es2015 вы можете использовать стрелки синтаксис (() => { /*code*/ }) синтаксис, который устанавливает this правильно