current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I am working on an infinite scroll solution and I am trying to push data onto an array of objects, but I am getting an error:

vue.common.js?e881:2643 [Vue warn]: Error when rendering anonymous component at /Users/Deric/Sites/mobile/lawn-mobile/src/components/jobs/index.vue: warn @ vue.common.js?e881:2643Vue._render @ vue.common.js?e881:2253(anonymous function) @ vue.common.js?e881:1699get @ vue.common.js?e881:736run @ vue.common.js?e881:805flushSchedulerQueue @ vue.common.js?e881:623nextTickHandler @ vue.common.js?e881:401
vue.common.js?e881:2262 TypeError: Cannot read property 'length' of undefined(…)

If i just set the data, it works, but the infinite scroll overwrites the data instead of appending to it. Here is my data object:

data () {
  return {
    jobs: [],

and here is my http call:

getJobs(pageNumber = 1) {
  let api = SessionStorage.get.item('api')
  let url = `${api.base_url}jobs?page=${pageNumber}`
  this.$http.get(url).then((response) => {
    console.log(response.body.data)
    this.jobs.push(response.body.data)

The console.log looks like this:

enter image description here

What is the trick to getting this to work? I have also tried concat but that doesn't work either.

share|improve this question
    
My guess is to check if this refers to right object – Sebastian Kaczmarek 2 days ago
up vote 1 down vote accepted

Are you using concat correctly, i.e.

this.jobs = this.jobs.concat(response.body.data)

only if the output of your console.log is correct this should give you an array of objects which seems to be what you are after.

share|improve this answer
    
I bet this is the reason. I was not assigning it to my jobs variable but instead using it more like then push method. I'll test as soon as I get home. – dericcain 2 days ago
    
That was the trick! I was doing this: this.jobs.concat(response.body.data) think it would "push" the data instead of reassigning the variable. Thanks! – dericcain 2 days ago
up vote 0 down vote

It looks like this is not pointing to correct object, try following-

getJobs(pageNumber = 1) {
  let api = SessionStorage.get.item('api')
  let url = `${api.base_url}jobs?page=${pageNumber}`
  let self = this 
  this.$http.get(url).then((response) => {
    console.log(self.jobs)
    console.log(response.body.data)
    self.jobs.push(response.body.data)
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.