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