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()函数中的这一行将Array分配给我的数据对象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外部运行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');
         }
      });

    }