Vue.jsと非同期機能コール

Question

私は、次の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()の結果を待たずに空の配列を返しますか？驚いたことに（私のために）、それはコールバック関数が完了した後に戻るだけです。

Answer 1

実際には空の配列しか返しません。

しかし、JSの配列は参照渡しであるため、戻ってくる配列はメソッド内の配列とまったく同じです。したがって、AJAXリクエストが解決されると、アイテムはその配列に追加されます。これは後で表示されます。