Javascript 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');
      }
    }
  }
});

当我尝试为运行此

时：

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

for（变量i=0，len=this.careerData.length；i

它不起作用，因为
this.careerData.length
中似乎没有数据，它只是一个空数组，但是当我尝试在HTML中运行我的组件时，数据会完美地显示在页面上

如果你知道我在这里可能会出错，那就好像我不能在我的任何方法中使用
this.careerData
。你知道为什么我已经在
fetchData
方法中分配了数据，却无法访问这些数据吗？很奇怪，数据能够完美地到达前端，但是我似乎无法在我的方法中的任何其他地方使用它

谢谢，Nick
您正在
然后
之外运行for循环，因为它是一个异步运算符，所以当您运行for循环时，数组仍然为空

将其放入
功能中，然后
功能：

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

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

    }

fetchData:function（）{
client.getEntries（）
。然后（条目=>{
this.careerData=entries.items；
for（var i=0，len=this.careerData.length；i
您正在
然后
之外运行for循环，由于它是一个异步运算符，因此当您运行for循环时，数组仍然为空

将其放入
功能中，然后
功能：

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

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

    }

fetchData:function（）{
client.getEntries（）
。然后（条目=>{
this.careerData=entries.items；
for（var i=0，len=this.careerData.length；i
我很奇怪为什么要在careerData数组中迭代两次？基本上，为什么要在fetchData方法中这样做？我想知道为什么要在careerData数组中迭代两次？基本上，为什么要在fetchData方法中这样做？