Vue JS data object not available within my methods

Question

I'm getting a little bit confused by Vue JS and how it is working. I have the following component:

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

This line within my then() function assigns an Array to my data object careerData.

this.careerData = entries.items

When I try to run this for:

  for (var i = 0, len = this.careerData.length; i < len; i++) {
    console.log('Success');
  }

It doesn't work because this.careerData.length appears to have no data in it, it's just an empty array however when I try running my component within my HTML the data is displayed perfectly on the page.

Any idea where I might be going wrong here, it's as if I can't use this.careerData in any of my methods. Any idea why I can't access this data even known I have assigned it in my fetchData method already? It's very strange the data manages to get to the front end perfectly however I can't seem to use it anywhere else within my methods.

Thanks, Nick

I'm wonder why you are iterating twice through careerData array ? Basically why you are doing that inside fetchData method ? — Belmin Bedak
– Belmin Bedak, Commented Jan 23, 2017 at 16:13

Tomer · Accepted Answer · 2017-01-23 15:23:18Z

3

You are running the for loop outside the then and since it's an async operator, the array is still empty when you run the for loop.

put it inside the then function:

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

         for (var i = 0, len = this.careerData.length; i < len; i++) {
            console.log('Success');
         }
      });

    }

answered Jan 23, 2017 at 15:23

Tomer

17.9k17 gold badges82 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

Vue JS data object not available within my methods

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related