javascript - 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 (var i = 0, len = this.careerData.length; i < len; i++) {
    console.log('Success');
  }

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

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

谢谢，尼克

Answer 1

您正在 then 之外运行 for 循环，并且由于它是异步运算符，因此当您运行 for 循环时数组仍然为空。

将其放入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');
         }
      });

    }