Update v-for When Data Is Added To Array - VueJS

Question

I'm kinda new to VueJS so I was hoping to get some help. I'm currently returning an array of json objects from a PHP file.

Example:

<?php
  /*
   Returns an array similar to this:
    [
      {name: 'foo'}, 
      {name: 'bar'}, 
      {name: 'banana'}
    ]
  */

  echo json_encode(array_values($array));
?>

And I'm appending this array of objects to an already existing array of objects in Vue:

axios.post('http://localhost/get_array.php').then(response => {
  // Append returned array to already existing array
  for (var i = 0; i <= response.data.length - 1; i++) {
    this.existingArray.push(response.data[i])
  }
}).catch(e => {
  console.log("Error")
})

Right now I'm appending the data with a for loop but I was wondering if VueJS has an in-built function that does this automatically without having to use the for loop?

See Array.prototype.concat() and Reactivity in depth on Vue docs. — Etheryte
– Etheryte, Commented Sep 8, 2017 at 21:22
I tried using concat() to merge the arrays but it wouldn't update the view where I was rendering them. I also tried Vue.set() but also couldn't get it to work, that's why I had to resort back to the for loop. @Nit — Brian Moreno
– Brian Moreno, Commented Sep 8, 2017 at 21:26
I was just doing this: this.existingArray.concat(response.data). Thanks everyone, I got it working with concat now and it's much easier than the for loop. — Brian Moreno
– Brian Moreno, Commented Sep 9, 2017 at 1:51

Steve Holgado · Accepted Answer · 2017-09-08 21:50:24Z

2

You can use concat which returns a new concatenated array:

axios.post('http://localhost/get_array.php')
  .then(response => {
    this.existingArray = this.existingArray.concat(response.data)
  })
  .catch(e => {
    console.log("Error")
  })

Updating existingArray with the result of calling concat with the response data should trigger the update.

answered Sep 8, 2017 at 21:50

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Update v-for When Data Is Added To Array - VueJS

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