How do I properly push an array into a data object in Vue?

Question

I'm trying to add multiple values into an existing data object pathStats: []

Code:

data () {
  return {
    pathStats: []
  }
}

computed: {
  loadDetails() {
    fse.stat('C:/').then((res) => {
      let edited = res.mtime
      let created = res.birthtime
      this.pathStats.push([{'edited': edited}, {'created': created}])
    })
  }
}

I want to be able to get the values separately when I need them, e.g.:

<p>{{pathStats.edited}}</p>
<p>{{pathStats.created}}</p>

But with the current code, I get undefined when I try to console.log pathStats.created or pathStats.edited

pathStats is an array, but you're trying to grab an object property out of it. Try pathStats[0][0].edited instead, for example, to perform the operation on an element of the array. — B. Fleming
– B. Fleming, Commented Mar 6, 2018 at 18:40
But how do I save it in a form that would allow me to get it by name, like that: pathStats.edited ? — Un1
– Un1, Commented Mar 6, 2018 at 18:42
Worse still, you're trying to push an array of objects where it doesn't make sense. If you want to make this simpler, try push({'edited': edited, 'created': created}). — B. Fleming
– B. Fleming, Commented Mar 6, 2018 at 18:42
Tell me this: is your intent to have a history of "path stats"? Or do you just want to update values in place? If you just want to update values in place, then you could do something like Object.assign(this.pathStats, {'edited': edited, 'created': created}); and in your data(), define pathStats: {}. What this does is overwrites the values in the original pathStats object with the values in another object. — B. Fleming
– B. Fleming, Commented Mar 6, 2018 at 18:45
@B.Fleming Yes, that's what I needed, just to push the data there so I can easily grab it, thanks that Object.assign method does the job — Un1
– Un1, Commented Mar 6, 2018 at 18:47

B. Fleming · Accepted Answer · 2018-03-06 18:55:06Z

1

Alternative solution, as per the discussion in the comments on the original question: Instead of using an array, just use an object and take advantage of Object.assign().

data () {
  return {
    pathStats: {}
  }
}

computed: {
  loadDetails() {
    fse.stat('C:/').then((res) => {
      let edited = res.mtime
      let created = res.birthtime
      Object.assign(this.pathStats, {'edited': edited, 'created': created})
    })
  }
}

The method Object.assign() takes 2 or more arguments. The first is the object you want to write values to, and the remaining n-1 objects will write values into the destination object in order. In this case, this.pathStats will receive overriding values from the second object.

This solution also has the advantage of not needing to access array elements since an array is not what was desired.

answered Mar 6, 2018 at 18:55

B. Fleming

7,2501 gold badge21 silver badges37 bronze badges

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

Comments

Reck · Accepted Answer · 2018-03-06 18:46:47Z

1

One way for this is:

How about having pathStats as an associative array.

data () {
  return {
    pathStats: {}
  }
}

computed: {
  loadDetails() {
    fse.stat('C:/').then((res) => {
      let edited = res.mtime
      let created = res.birthtime
      this.pathStats['edited'] = edited
      this.pathStats['created'] = created
    })
  }
}

And you can it this way.

{{pathStats.edited}}
{{pathStats.created}}

Or else (Not recommended though)

But if you want it only has an arrayList. You may want to get it through indices.

{{pathStats[0][0].edited}}
{{pathStats[0][0].created}}

answered Mar 6, 2018 at 18:46

Reck

1,43612 silver badges20 bronze badges

2 Comments

Un1 Over a year ago

Thank you for the answer, that works just as Object.assign, but it's not overwriting the current data in the array, so that's nice to know

Reck Over a year ago

Yeah even I would have probably accepted Object.assign. Thats a nice one.

Collectives™ on Stack Overflow

How do I properly push an array into a data object in Vue?

Code:

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code:

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related