私のメソッドではVue JSデータオブジェクトが利用できません

Question

私はVue JSとその動作方法を少し混乱させています。私は、次のコンポーネントがあります。

Vue.component('careers', { 
    template: ` 
    <div class="context"> 
    <div v-for="career in careerData"> 
     <h1>{{ career.fields.jobTitle }}</h1> 
     {{ career.fields.jobDescription }} 
    </div> 
    </div>`, 

    data: function() { 
    return { 
    careerData: [] 
    } 
    }, 

    created: function() { 
    this.fetchData(); 
    }, 

    methods: { 
    fetchData: function() { 
     client.getEntries() 
     .then(entries => { 
     this.careerData = entries.items; 
     }); 
     for (var i = 0, len = this.careerData.length; i < len; i++) { 
     console.log('Success'); 
     } 
    } 
    } 
}); 

私then()関数内のこの行は、私のデータオブジェクトcareerDataに配列を割り当てます。

this.careerData = entries.items 

私はこのfor実行しよう：それは動作しません

for (var i = 0, len = this.careerData.length; i < len; i++) { 
    console.log('Success'); 
    } 

をthis.careerData.lengthが、それにはデータを持っていないように見えるので、私は以内に私のコンポーネントを実行しようとすると、それはしかし、ちょうど空の配列です私のHTMLデータはページに完全に表示されます。

私がここで間違っているかもしれないと思うことは、どんな私の方法でもthis.careerDataを使用できないかのようです。私がこのデータにアクセスできない理由がわかっていても、すでに私はfetchDataメソッドでそれを割り当てていますか？データがフロントエンドに完全に到達するように管理するのは非常に奇妙ですが、私の方法ではどこにでも使用することはできません。

おかげで、ニック

Answer 1

あなたはthen外ループのために実行されており、それが非同期オペレータなので、あなたがループのために実行したときに、配列が空のままです。

はthen関数の中にそれを置く：

fetchData: function() { 
     client.getEntries() 
     .then(entries => { 
     this.careerData = entries.items; 

     for (var i = 0, len = this.careerData.length; i < len; i++) { 
      console.log('Success'); 
     } 
     }); 

    }