Vue.js add objects to existing array

vue js push object to array
vue array push reactive
vue set array
vue js object to array
vuex update object in array
vue array not reactive
vue add new property to object
vue push to array not reactive

I'm trying to add elements from json response to my existing array by clicking on a button but I have a problem with adding these elements properly.

Here I have an empty array called results where I'm storing my data from response.

export default {
  name: 'Posts',
  props: ['user_id'],
  data: function(){
      return{
          results: [],
          pageNumber: 1,
      }
  },.....

This is my method for getting data:

getData: function () {

    var vm = this;

    axios.get('http://127.0.0.1:8000/api/posts?page=' + vm.pageNumber)
    .then(function (response) {
        vm.results += response.data.data;

    })
    .catch(function (error) {
    });

},

In this method I'm adding response data to array like this:

vm.results += response.data.data;

My respose is correct but after this operation my results array look like: "[object Object],[object Object]..."

I have also tried to add new elements by push method:

vm.results.push(response.data.data);

But then, elements are added in new arrays but I want to add objects to existing array.

Here is the structure of my response:

{"current_page":1,
"data":[
{
"id":60,
"title":"Post 1",
"body":"Post 1 body",
"created_at":"2018-06-09 18:33:40",
"updated_at":"2018-06-09 18:33:40",
"user_id":8
},
{
"id":61,
"title":"Post 2",
"body":"post 2 body",
"created_at":"2018-06-09 18:33:40",
"updated_at":"2018-06-09 18:33:40",
"user_id":8
},
etc...]

Try :

vm.results =  vm.results.concat(response.data.data);

This will append the array "response.data.data" to the "results" array.

Add a new object to a json collection of objects - vue-core, So I have a watch that needs to append an object to an already defined list of Is this just a counting number? why not use an array then? Vue.js Array Push – You can use.push method to add an element in array or object. Here in this tutorial, we are going to explain how you can add an element in array or object. You can also use our online editor to edit and run the code online. Vue.js Array Push | Add Element To Array Example

First of all you don't have to use var vm = this;, this.results will work even in your axios (and every other) callbacks in the context of a vue component.

But the actual problem is that you are using the concatenation += operator to add to an array. Simply use push with the spread operator (...) instead and it should work.

axios.get('http://127.0.0.1:8000/api/posts?page=' + this.pageNumber)
.then(response => {
    this.results.push(...response.data.data);

})

Proper method of adding an array of objects to the vuex , Proper method of adding an array of objects to the vuex state? However, I've learned that due to the limitations of javascript, Vue cannot react what is the correct way to update properties within an existing array element? As long as you call set() once to set the object (with the property you are going to update) in the array, Vue will react to changes in the object's properties. Here's an example that has one array of objects initialized in our app's data, and another array of objects manually set (with Vue.set()) when mounted.

ES6 way of doing this is using the spread operator ...:

let a = [{name: 'Peter'}]
let b = [{name: 'Joanna'}, {name: 'Steven'}]

// use JSON.stringify so you don't see [Object object] when console logging
console.log('[...a, ...b]' + JSON.stringify([...a, ...b]))

Update Array and Object in Vuejs - Milad Meidanshahi, Similarly, Vue.js cannot pick up these changes. However, it's possible to add reactive properties to a nested object using the Vue.set(object, a number of new properties to an existing object, for example using Object.assign() or _.​extend() . There are 3 popular methods which can be used to insert or add an object to an array. push() splice() unshift() Method 1: push() method of Array. The push() method is used to add one or multiple elements to the end of an array. It returns the new length of the array formed. An object can be inserted by passing the object as a parameter to this method.

Pushing object in array from defined variable adds them by , Add - OK": this button pushes new object to the array by passing the object in clear js Is this an issue/feature with Javascript or with vue itself? I have a Vue.js app where I have a v-repeat on an array of items. I want to add a newItem to the list of items. When I try this.items.push(this.newItem) the object pushed is still bound to the input.

How to add a new property to vue (object) data? · Issue #3340 , I could use this method to add new contact ways to add new property to object, or I'd better change to use array Read the docs: Vue.set  The array unshift method is used to add elements to the beginning of an array. It accepts multiple arguments, adjusts the indexes of existing elements, and returns the new length of the array. The unshift method modifies the array on which it is invoked.

How to append an item to an array in JavaScript, Append a single item. To append a single item to an array, use the push() method provided by the Array object: const  Due to limitations in JavaScript, Vue cannot detect the following changes to an array: When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue. When you modify the length of the array, e.g. vm.items.length = newLength.

Comments
  • Of course that works - that's what Array.prototype.concat() was designed for. The more modern, preferrable approach in case you have a Babel transpilation in your build process though is using the spread operator .... You better get used to it, you gonna see this everywhere soon.
  • That would make him push an array into his existing array, instead of pushing those elements in his response array.
  • @connexo My bad, didn't see the response data was an array. You can still do it with the spread ... operator though.
  • Yeah, as @connexo said, it would create new arrays into my existing arrays. What do you mean by spread operator? And I have checked that I still have to use this vm variable instead of this inside axios.
  • @VividDreams The spread operator always gets lots of confusion. It is literally three dots, so the ... is part of the code. It takes the content from an object (or array) and spreads it out, so basically pushes every element of the incoming data into the results array. It is super useful in many situations, you can check out the documentation here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/….
  • this.results.push(...response.data.data); will not work for two reasons: push expects a single array element and adds that after the end of the array it is called on. this is not what you are expecting here, you either have to use arrow syntax .then((response ) => {/*whatever*/}) or use Function.prototype.bind() method like .then(function (response) { /*whatever*/ }.bind(this))
  • Ok, but how to use it in this specific case? results = [...results] + JSON.stringify({...response.data.data}) is not working. What am I getting wrong?
  • results = [...results, ...response.data.data] The call to JSON.stringify is only for logging (so you see a proper textual representation of the contained objects), not for your real code.
  • Ok, thank you. I don't have babel set up, so I can't check right now if this one works or not. Not working in chrome and according to specs it should work on chrome without babel. It gives me an empty array.
  • That is not due to the spread operator then, there's got to be something else that ruins it. Also, with any vue template, you have Babel setup included already. Don't use the <script src="/path/to/vue.min.js"> version of Vue, you're missing out on the best part of Vue then.
  • Added an example based off your sample data given to prove it works. I recommend you try to identify the error in your code giving you an empty array just for practice reasons - it might help you understand the spread operator.