V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
liceal
V2EX  ›  Vue.js

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

  •  
  •   liceal · 2019-07-04 19:49:12 +08:00 · 10546 次点击
    这是一个创建于 1997 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    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)
          })
    
    
    24 条回复    2019-07-05 14:15:05 +08:00
    chenstack
        1
    chenstack  
       2019-07-04 19:55:30 +08:00
    Caballarii
        2
    Caballarii  
       2019-07-04 19:56:47 +08:00
    forceUpdate
    renmu
        3
    renmu  
       2019-07-04 20:04:06 +08:00 via Android
    nexttick
    a4854857
        4
    a4854857  
       2019-07-04 20:07:49 +08:00   ❤️ 1
    你 console 打印出来是值是不是当时的值. 查看到的永远都是最新的.
    应该在打印的时候 JSON.strintify() 这样才是当时的值.
    hubqin
        5
    hubqin  
       2019-07-04 20:47:03 +08:00 via Android
    $nexttick
    liceal
        6
    liceal  
    OP
       2019-07-04 21:52:33 +08:00
    @chenstack $set 可以显示最新数据了,谢谢。但是,去得到最新数据里面的某个键的值还是报错 undefined,可能是第一次是空的,第二次有值,用$set 的方式,可以让节点重新渲染
    forgcode
        7
    forgcode  
       2019-07-04 22:58:41 +08:00
    Biwood
        8
    Biwood  
       2019-07-04 23:16:03 +08:00   ❤️ 1
    楼上一堆回复 API 的,拜托看看楼主代码本身好吧,代码逻辑本身写的有问题,试图用 API 去弥补只会让程序运行效率更低。

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

    这种写法确定没问题吗?
    seki
        9
    seki  
       2019-07-04 23:28:19 +08:00
    建议仔细读一遍文档
    xzh654321
        10
    xzh654321  
       2019-07-04 23:34:43 +08:00
    你的 experts 里面声明的时候一定没有 element['id']这个属性
    doommm
        11
    doommm  
       2019-07-04 23:51:59 +08:00
    建议每一次直接生成一个新对象去替换掉 this.experts
    xg4
        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 的正确使用方式
    V2exUser
        13
    V2exUser  
       2019-07-05 01:30:15 +08:00 via Android
    定义一个变量,然后循环里用这个变量接收,循环外再赋值给 exports
    ericgui
        14
    ericgui  
       2019-07-05 01:36:06 +08:00 via Android
    你代码有问题

    搞清楚异步的思维方式
    hyy1995
        15
    hyy1995  
       2019-07-05 09:36:26 +08:00
    1 楼就是正解,刚准备想发,就看到 1 楼已经回复了。这个坑当时也困扰过我
    LongMaoz
        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 ?
    liceal
        17
    liceal  
    OP
       2019-07-05 11:06:00 +08:00
    @Biwood 数据可以成功打印。这里的主要问题,比如:
    a=[]
    a={'name':'张三'}
    console.log(a.name) => undefined..
    liceal
        18
    liceal  
    OP
       2019-07-05 11:06:40 +08:00
    @xzh654321 这个我在控制台 console 输出过了 存在的,但是页面渲染同样的输出数据是 undefined
    liceal
        19
    liceal  
    OP
       2019-07-05 11:07:49 +08:00
    @xg4 这个 key 肯定是存在的,渲染没问题
    liceal
        20
    liceal  
    OP
       2019-07-05 11:15:30 +08:00
    @LongMaoz 这是一个对象,把 id 作为键
    liceal
        21
    liceal  
    OP
       2019-07-05 11:19:46 +08:00
    @hyy1995 set 完会重新渲染 DOM,但是这次的 DOM 可能是第二次渲染,那第一次的时候数据是空的,就会报错。。。
    chenstack
        22
    chenstack  
       2019-07-05 11:44:44 +08:00
    @liceal 建议定义数据时给一个默认值,或者给用户数据正在加载的提示。
    xg4
        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
    liceal
        24
    liceal  
    OP
       2019-07-05 14:15:05 +08:00   ❤️ 1
    @xg4 set 是会重新渲染 DOM 但可能在此之前,DOM 已经渲染一次了,那一次就错了。。。问题已经找到了,数据少了一条,导致找不到,我已经拿刀去找后端了。。😡
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2756 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:55 · PVG 17:55 · LAX 01:55 · JFK 04:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.