Vue.js和異步函數調用

我有以下Vue.js組件：Vue.js和異步函數調用

module.exports = { 
    data: function() { 
     return { 
      searchText: "", 
      searchResult: [] 
     } 
    }, 
    watch: 
    { 
     searchText: function() { 
      this.searchResult = this.search() 
     } 
    }, 
    methods: 
    { 
     search: function() 
     { 
      var result = []; 
      var _self = this; 

      $.getJSON("data/data.json", function(json) {     
       $.each(json, function(index, obj) { 
        if (_self.searchText.length > 0 && obj.text.indexOf(_self.searchText) != -1) 
         result.push(obj); 
       }, this); 
      }); 

      return result; 
     } 
    } 
}

此代碼的工作好，但我不明白爲什麼：

爲什麼search()不返回空數組無需等待$.getJSON()這是一個異步函數的結果？令人驚訝的是（對我來說），它只在回調函數完成後纔會返回。

來源

2017-03-05 Farkas Bence

@JosephSilber已經給出了正確的答案，但作爲一點額外的，你可以返回'result.slice（）'創建數組的副本，在這種情況下，它將成爲你的快照。那麼你應該看到它確實是空的:) – cyrix

它確實只返回一個空數組。

但是，由於JS中的數組是通過引用傳遞的，所以返回的數組與方法中的數組完全相同。所以，當AJAX請求解決時，這些項目被添加到該數組，這是你隨後看到的。

來源

2017-03-05 21:48:04

Vue.js和異步函數調用

回答

相關問題