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

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

  •  
  •   liceal · 109 天前 · 2782 次点击
    这是一个创建于 109 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    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
        2
    Caballarii   109 天前
    forceUpdate
        3
    renmu   109 天前 via Android
    nexttick
        4
    a4854857   109 天前   ♥ 1
    你 console 打印出来是值是不是当时的值. 查看到的永远都是最新的.
    应该在打印的时候 JSON.strintify() 这样才是当时的值.
        5
    hubqin   109 天前 via Android
    $nexttick
        6
    liceal   109 天前
    @chenstack $set 可以显示最新数据了,谢谢。但是,去得到最新数据里面的某个键的值还是报错 undefined,可能是第一次是空的,第二次有值,用$set 的方式,可以让节点重新渲染
        8
    Biwood   109 天前   ♥ 1
    楼上一堆回复 API 的,拜托看看楼主代码本身好吧,代码逻辑本身写的有问题,试图用 API 去弥补只会让程序运行效率更低。

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

    这种写法确定没问题吗?
        9
    seki   109 天前
    建议仔细读一遍文档
        10
    xzh654321   109 天前
    你的 experts 里面声明的时候一定没有 element['id']这个属性
        11
    doommm   109 天前
    建议每一次直接生成一个新对象去替换掉 this.experts
        12
    xg4   109 天前   ♥ 1
    你在 data 中的 experts 肯定是一个空对象,没有给出内部具体的 key,Vue 无法帮你进行双向绑定,所以 this.experts[key] = 123 的值变化,不会自动更新视图。但是 experts 被监听了,可以直接替换整个对象,this.experts = {},这样视图会被更新。

    这个问题的根源是 Object.defineProperty,弄懂这个 API 就知道 Vue 的正确使用方式
        13
    V2exUser   109 天前 via Android
    定义一个变量,然后循环里用这个变量接收,循环外再赋值给 exports
        14
    ericgui   109 天前 via Android
    你代码有问题

    搞清楚异步的思维方式
        15
    hyy1995   109 天前
    1 楼就是正解,刚准备想发,就看到 1 楼已经回复了。这个坑当时也困扰过我
        16
    LongMaoz   109 天前
    result.forEach(element => { //这里在处理数据
    this.experts[element['id']] = element
    })
    你这里是个啥?
    this.experts 是个数组? ID 是 Number? 遍历替换 this.experts 数据为 element ?
        17
    liceal   109 天前
    @Biwood 数据可以成功打印。这里的主要问题,比如:
    a=[]
    a={'name':'张三'}
    console.log(a.name) => undefined..
        18
    liceal   109 天前
    @xzh654321 这个我在控制台 console 输出过了 存在的,但是页面渲染同样的输出数据是 undefined
        19
    liceal   109 天前
    @xg4 这个 key 肯定是存在的,渲染没问题
        20
    liceal   109 天前
    @LongMaoz 这是一个对象,把 id 作为键
        21
    liceal   109 天前
    @hyy1995 set 完会重新渲染 DOM,但是这次的 DOM 可能是第二次渲染,那第一次的时候数据是空的,就会报错。。。
        22
    chenstack   109 天前
    @liceal 建议定义数据时给一个默认值,或者给用户数据正在加载的提示。
        23
    xg4   109 天前
    @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
        24
    liceal   109 天前   ♥ 1
    @xg4 set 是会重新渲染 DOM 但可能在此之前,DOM 已经渲染一次了,那一次就错了。。。问题已经找到了,数据少了一条,导致找不到,我已经拿刀去找后端了。。😡
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4112 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 777ms · UTC 09:21 · PVG 17:21 · LAX 02:21 · JFK 05:21
    ♥ Do have faith in what you're doing.