Vue JS v-for not iterating over array

Question

Hi guys I am using Vue JS to try and loop through my data. Here is my whole JS file:

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

I am using methods to access some data from Contentful, once it has grabbed the necessary data it is sent to my data object.

If I console.log(careerData); within my console the following data is returned:

So I'd expect if I used v-for within my template and tried iterating over careerData it would render correctly however on my front-end I am left with an empty div like so:

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

I am currently pulling my component into my HTML like so:

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

No errors are displayed within my console, can you think of any reason this might be happening?

Thanks, Nick

shouldn't the code in your template be {{ career.fields.jobDescription }}? — UnholySheep
– UnholySheep, Commented Jan 23, 2017 at 12:40
I think your v-for starts iterating before the data is fetched. You have to wait for fetchData() to complete the callback before iterating through careerData. Perhaps try adding a check if careerData contains anything? — Max Taylor
– Max Taylor, Commented Jan 23, 2017 at 12:43

rap-2-h · Accepted Answer · 2017-01-23 12:49:19Z

1

Several problems I think. As @dfsq said, you should use a arrow function if you want to keep context (this).

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

Then you may replace {{fields.jobDescription}} by {{career.fields.jobDescription}}, as @unholysheep wrote.

It may work. If it does not, you could add a this.$forceUpdate(); right after this.fetchData();

answered Jan 23, 2017 at 12:49

rap-2-h

32.3k49 gold badges190 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Maddren Over a year ago

Thanks this really helped, I'm confused to why I didn't need to use the foreach anymore. Maybes I need to do a little bit more research on what then is doing.

dfsq · Accepted Answer · 2017-01-23 12:43:20Z

0

Use arrow function in forEach callback so you don't loose context:

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

answered Jan 23, 2017 at 12:43

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Vue JS v-for not iterating over array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related