方法でvuejsデータにアクセスする方法

Question

laravelでajaxリクエストを使用して、vue.jsの配列にデータベースからのデータのコレクションを保存しました。メソッドの内部でそのコレクションからデータを取得したいので、本体のデータを増やすことができますが、何とかアクセスできなくなります。たとえば、以下のコードを使用します。

var vm = this; 
$.get('url', function (response) { 
     vm.time_slots = response; 
     for(i=0; i < vm.time_slots.length; i++){ //also tried with var/let i 
     if(i=0){ 
      console.log(vm.time_slots[i].start_time); 
     }else if(vm.time_slots[i].start_time > vm.time_slots[i-1].start_time){ 
      console.log(vm.time_slots[i].start_time); 
     } 
     } 
    }, 'json'); 

私はうんざりします。しかし、私はそれが私が必要なものを得るコンソールを介してアクセスする場合。以下はデータです。

data: { 
    time_slots: [], 
    current_timeslots: [] 
}, 

今time_slotsの各time_slotはSTART_DATE END_DATEなどを持って、私はそれらにアクセスしたいが、私は未定義得ます。 even this.time_slots.lengthは0として返されますが、コンソールにチェックインすると12が返されます。 メソッドでデータにアクセスするにはどうすればよいですか？

Answer 1

$.getは、非同期 HTTP要求を実行します。そのリクエストから返されるデータは、コールバック関数内でのみ使用できます。

var vm = this; 

$.get('url', function (response) { 
    // This code executes once the data is available 
    vm.time_slots = response; 

    // This works 
    console.log(vm.time_slots[0]); 
}, 'json'); 

// This line executes immediately after the above HTTP request is 
// sent but not yet resolved, so the data isn't available 
console.log(vm.time_slots[0]); 

AJAXリクエストの仕組み、特にJavaScriptでこのようなHTTPリクエストを実行する非同期性を理解することが重要です。

上記のコードのさまざまな場所にブレークポイントを置き、ブラウザのデバッガで実行パスをステップ実行して、その動作方法を確認する必要があります。私はそれがVuejsの問題よりも、非同期問題の詳細と思われると思います

var data = 'hello'; 

setTimeout(function() { 
    data = 'world'; 
    console.log('inside callback: ' + data); 
}, 1000); 

console.log('outside callback: ' + data); 

Answer 2

：

はここでこれがどのように機能するかを示して別の（単純な）例です。非同期呼び出しがjavascriptでどのように動作するかを覚えておく必要があります。非同期呼び出しは、次のコード行をブロックせずにそのタスクを実行します。言い換えれば、非同期呼び出しは、コードの次の行が実行されるのとほぼ同時に実行されます。あなたの場合：

$.get('url', function (response) { 
    // if you want to do operations (formatting data, do some calculation, or set your vue instance data) immediately after $.get returns data, put your operations inside this callback 

}, 'json'); 
// this is the next line of code, and will be executed almost at the same time $.get executed 
// if you put those operations here (outset $.get method), $.get method hasn't finished yet because asynchronous call need more time to finish, so you don't have any data to be processed at that time, that's why it show 'undefined' 

なぜコンソールからアクセスするとデータが返されますか？これは、コンソールにアクセスする前に$ .getがすでに終了しているためです。あなたは不運だか$は、コンソールにアクセスする時間よりも完了するより多くの時間が必要に.get場合は、データを取得していないだろう、とにかく

希望これは私が本当に知らなかったあなたの答えのための