javascript - 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.fetchData();

之后添加 this.$forceUpdate();