Question

我正在尝试从promise回调中更改我的Vue数据，由于某种原因，我无法在模板中看到值的变化，

我看到了这个问题how to update a vue's property in a promise call back? 我已将this更改为正确的，但仍然无法看到模板中的值发生变化。

这是我的模板：

<template>
  {{ sites }}
</template>

这是我的剧本：

data: () => ({
  sites: {}
}),
methods: {
  initialize(snapshot) {
    let _this = this
    snapshot.forEach((site) => {
      convert(site.data())
        .then(converted => {
          _this.sites[site.id] = converted
        })
    })
  }
}

知道为什么我的数据不会改变？

Answer 1

我认为这是反应性问题。请尝试

.then(converted => {
  const sites = JSON.parse(JSON.stringify(_this.sites))
  sites[site.id] = converted
  _this.sites = sites
}

更多解释：

为了更新页面，Vue做了便宜的比较（据我所知，参考比较）。如果您只更新对象的属性，它们仍然指向相同的引用 - ＆gt; Vue不会更新页面。所以我们需要对它们进行深层复制以使比较工作

从promise回调中更改vue数据

1 个答案: