Vue JS數據對象在我的方法中不可用

我受到Vue JS的困擾以及它如何工作。我有以下部件：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方法中指定了它？數據管理到達前端非常奇怪，但我似乎無法在我的方法中的任何其他地方使用它。

謝謝，尼克

來源

2017-01-23 Nick Maddren

我不知道爲什麼你是通過careerData陣列迭代兩次？基本上你爲什麼要在fetchData方法中做這件事？ –

您正在運行的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'); 
     } 
     }); 

    }

來源

2017-01-23 15:23:18 Tomer

Vue JS數據對象在我的方法中不可用

回答

相關問題