V2EX = way to explore V2EX 是一个关于分享和探索的地方
This topic created in 2491 days ago, the information mentioned may be changed or developed.
之前没出现过这个问题，过了几天就出现了问题，很迷，代码都没改过，目前个人得到的结论：数据还在处理但是没处理完，默认为空数组，但是页面已经渲染了。。但是按道理数据改变了应该渲染啊。。。
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) })  | 1 chenstack Jul 4, 2019 https://cn.vuejs.org/v2/guide/list.html?#对象变更检测注意事项 可以试一下 Vue.set |
 | 2 Caballarii Jul 4, 2019 forceUpdate |
 | 3 renmu Jul 4, 2019 via Android nexttick |
 | 4 a4854857 Jul 4, 2019  1 你 console 打印出来是值是不是当时的值. 查看到的永远都是最新的. 应该在打印的时候 JSON.strintify() 这样才是当时的值. |
 | 5 hubqin Jul 4, 2019 via Android $nexttick |
 | 6 liceal OP @chenstack $set 可以显示最新数据了，谢谢。但是，去得到最新数据里面的某个键的值还是报错 undefined，可能是第一次是空的，第二次有值，用$set 的方式，可以让节点重新渲染 |
 | 7 forgcode Jul 4, 2019 |
 | 8 Biwood Jul 4, 2019 1 楼上一堆回复 API 的，拜托看看楼主代码本身好吧，代码逻辑本身写的有问题，试图用 API 去弥补只会让程序运行效率更低。 result.forEach(element => { //这里在处理数据 this.experts[element['id']] = element }) 这种写法确定没问题吗？ |
 | 9 seki Jul 4, 2019 建议仔细读一遍文档 |
 | 10 xzh654321 Jul 4, 2019 你的 experts 里面声明的时候一定没有 element['id']这个属性 |
 | 11 doommm Jul 4, 2019 建议每一次直接生成一个新对象去替换掉 this.experts |
 | 12 xg4 Jul 5, 2019 1 你在 data 中的 experts 肯定是一个空对象，没有给出内部具体的 key，Vue 无法帮你进行双向绑定，所以 this.experts[key] = 123 的值变化，不会自动更新视图。但是 experts 被监听了，可以直接替换整个对象，this.experts = {}，这样视图会被更新。 这个问题的根源是 Object.defineProperty，弄懂这个 API 就知道 Vue 的正确使用方式 |
 | 13 V2exUser Jul 5, 2019 via Android 定义一个变量，然后循环里用这个变量接收，循环外再赋值给 exports |
 | 14 ericgui Jul 5, 2019 via Android 你代码有问题 搞清楚异步的思维方式 |
 | 15 hyy1995 Jul 5, 2019 1 楼就是正解，刚准备想发，就看到 1 楼已经回复了。这个坑当时也困扰过我 |
 | 16 LongMaoz Jul 5, 2019 result.forEach(element => { //这里在处理数据 this.experts[element['id']] = element }) 你这里是个啥？ this.experts 是个数组？ ID 是 Number? 遍历替换 this.experts 数据为 element ？ |
| 17 liceal OP |
| 23 xg4 Jul 5, 2019 @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 |
Select Language