代码：

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}])
    })
  }
}

我希望能够在需要时单独获取值，例如：

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

但是使用当前代码，当我尝试console.log undefined或pathStats.created

时，我会收到pathStats.edited

Answer 1

一种方法是：

如何将 pathStats 作为关联数组。

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

你可以这样做。

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

或者（不推荐）

但是如果你想要它只有一个arrayList。您可能希望通过索引获取它。

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

Answer 2

替代解决方案，根据对原始问题的评论中的讨论：不使用数组，只需使用对象并利用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})
    })
  }
}

方法Object.assign()需要2个或更多参数。第一个是要写入值的对象，剩余的n-1个对象将按顺序将值写入目标对象。在这种情况下，this.pathStats将从第二个对象接收覆盖值。

此解决方案还具有不需要访问数组元素的优点，因为数组不是所期望的。

如何在Vue中将数组正确地推送到数据对象中？

代码：

2 个答案: