Vue JS v-for不迭代数组

Question

大家好我正在使用Vue JS尝试循环我的数据。这是我的整个JS文件：

var contentful = require('contentful');

var client = contentful.createClient({
  space: 'HIDDEN',
  accessToken: 'HIDDEN'
});

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

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

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

  methods: {
   fetchData: function() {
     client.getEntries()
     .then(function (entries) {
       // log the title for all the entries that have it
       entries.items.forEach(function (entry) {
         if(entry.fields.jobTitle) {
           this.careerData = entries.items;
         }
       })
     });
   }
  }
});

var app = new Vue({
  el: '#app'
});

我正在使用方法从Contentful访问一些数据，一旦它抓取了它发送到我的数据对象的必要数据。

如果我在我的控制台中console.log(careerData);，则会返回以下数据：

所以我希望如果我在我的模板中使用v-for并尝试迭代careerData它会正确渲染，但是在我的前端我会留下一个空div，如下所示：

<div id="app"><div></div></div>

我正在将我的组件拉入我的HTML中：

<div id="app">
  <careers></careers>
</div>

我的控制台中没有显示任何错误，你能想到这可能发生的任何原因吗？

谢谢，尼克

Answer 1

我认为有几个问题。正如@dfsq所说，如果你想保留上下文（this），你应该使用箭头函数。

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

然后你可以将{{fields.jobDescription}}替换为{{career.fields.jobDescription}}，就像@unholysheep所写。

它可能有用。如果没有，您可以在this.$forceUpdate();

之后添加this.fetchData();

Answer 2

在forEach回调中使用箭头功能，这样就不会失去上下文：

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