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

[liceal]

@hyy1995 set 完会重新渲染 DOM，但是这次的 DOM 可能是第二次渲染，那第一次的时候数据是空的，就会报错。。。

[chenstack]

@liceal 建议定义数据时给一个默认值，或者给用户数据正在加载的提示。

[xg4]

@liceal 不是 key 存不存在的问题，比如：

data() {
return {
experts: {
foo: 'hello'
}
}
}

this.experts.foo = '123' 可以触发更新视图

this.experts.bar = '123123' 就不行，这里就需要用 set 函数操作才能更新视图

bar 是后面加入的数据，Vue 在初始化的时候不知道有 bar 这个属性，并没有对 bar 进行监听

你写在 data 中的数据，Vue 在初始化的时候会帮你处理成 Object.defineProperty 双向绑定，这样才能在值改变的时候，更新视图
深入响应式原理 - https://cn.vuejs.org/v2/guide/reactivity.html

[liceal]

@xg4 set 是会重新渲染 DOM 但可能在此之前，DOM 已经渲染一次了，那一次就错了。。。问题已经找到了，数据少了一条，导致找不到，我已经拿刀去找后端了。。😡