Vue 怎么等待数据处理完后再渲染 DOM 节点

[liceal]

之前没出现过这个问题，过了几天就出现了问题，很迷，代码都没改过，目前个人得到的结论：数据还在处理但是没处理完，默认为空数组，但是页面已经渲染了。。但是按道理数据改变了应该渲染啊。。。

html 代码 这里页面渲染完是显示是空数组

<span v-for="(value,key) in item['expert']" :key="key">
	<a>{{experts}}</a>
</span>

这里处理完 console 打印出来的数据是有的

apiAllExperts()
      .then(Response => {
        if (Response['msg'] == 'success') {
          let result = Response['data']
          result.forEach(element => { //这里在处理数据
            this.experts[element['id']] = element
          })
          console.log(123123, this.experts)  //处理完数据后打印出来显示有的
        } else {
          console.log('请求出错' + Response)
        }
      })
      .catch(e => {
        console.log('数据请求失败')
        console.log(e)
      })

[chenstack]

https://cn.vuejs.org/v2/guide/list.html?#对象变更检测注意事项
可以试一下 Vue.set

[Caballarii]

forceUpdate

[renmu]

nexttick

[a4854857]

你 console 打印出来是值是不是当时的值. 查看到的永远都是最新的.
应该在打印的时候 JSON.strintify() 这样才是当时的值.

[hubqin]

$nexttick

[liceal]

@chenstack $set 可以显示最新数据了，谢谢。但是，去得到最新数据里面的某个键的值还是报错 undefined，可能是第一次是空的，第二次有值，用$set 的方式，可以让节点重新渲染

[forgcode]

可以看看文档
https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method 这里有说明！

[Biwood]

楼上一堆回复 API 的，拜托看看楼主代码本身好吧，代码逻辑本身写的有问题，试图用 API 去弥补只会让程序运行效率更低。

result.forEach(element => { //这里在处理数据
this.experts[element['id']] = element
})

这种写法确定没问题吗？

[seki]

建议仔细读一遍文档

[xzh654321]

你的 experts 里面声明的时候一定没有 element['id']这个属性

[doommm]

建议每一次直接生成一个新对象去替换掉 this.experts

[xg4]

你在 data 中的 experts 肯定是一个空对象，没有给出内部具体的 key，Vue 无法帮你进行双向绑定，所以 this.experts[key] = 123 的值变化，不会自动更新视图。但是 experts 被监听了，可以直接替换整个对象，this.experts = {}，这样视图会被更新。

这个问题的根源是 Object.defineProperty，弄懂这个 API 就知道 Vue 的正确使用方式

[V2exUser]

定义一个变量，然后循环里用这个变量接收，循环外再赋值给 exports

[ericgui]

你代码有问题

搞清楚异步的思维方式

[hyy1995]

1 楼就是正解，刚准备想发，就看到 1 楼已经回复了。这个坑当时也困扰过我

[LongMaoz]

result.forEach(element => { //这里在处理数据
this.experts[element['id']] = element
})
你这里是个啥？
this.experts 是个数组？ ID 是 Number? 遍历替换 this.experts 数据为 element ？

[liceal]

@Biwood 数据可以成功打印。这里的主要问题，比如：
a=[]
a={'name':'张三'}
console.log(a.name) => undefined..

[liceal]

@xzh654321 这个我在控制台 console 输出过了 存在的，但是页面渲染同样的输出数据是 undefined

[liceal]

@xg4 这个 key 肯定是存在的，渲染没问题

[liceal]

@LongMaoz 这是一个对象，把 id 作为键