zoukankan      html  css  js  c++  java
  • vue——$nextTick解决节点获取不到问题

    参考:https://www.jianshu.com/p/a7550c0e164f

    原理: Vue.nextTick用于延迟执行一段代码,为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

    我的问题:异步获取数据,循环遍历,操作dom标签时获取不到节点

    vue:

    <div id="d-list">
        <span class="d-items" v-for="item in list">{{item.name}}({{item.num}})</span>
    </div>

    原script:

    let _this = this;
    _this.axios.get('***').then(function(res) {
      if (res.status == 200 && res.data.result == 0) {
         let _data = res.data.message;
           _this.list = _data.list;
            if (_this.list.length > 0) {
               let obj = document.getElementById('d-list'),
                  items = document.getElementsByClassName('d-items')[0];
          console.log('obj',obj,'items',items); //obj获得得到,items为undefined
           }
        } else {
            console.log('fail:' + res.data.error)
        }
    }).catch(function(err) {
       console.log('error:' + err);
    });

    解决:利用$nextTick

    let _this = this;
    _this.axios.get('***').then(function(res) {
      if (res.status == 200 && res.data.result == 0) {
         let _data = res.data.message;
           _this.list = _data.list;
           _this.$nextTick(() => {
             if (_this.list.length > 0) {
                 let obj = document.getElementById('d-list'),
                  items = document.getElementsByClassName('d-items')[0];
            console.log('obj',obj,'items',items); } }) }
    else { console.log('fail:' + res.data.error) } }).catch(function(err) { console.log('error:' + err); });
  • 相关阅读:
    构建之法 读书笔记二
    聚集索引,非聚集索引,覆盖索引
    最佳左前缀法则
    悲观锁和乐观锁
    JVM (三)- GC 垃圾回收器
    JVM 内存模型
    Java内存模型(JMM) 和 JVM 内存模型区别
    byType 和 byName 的区别
    Spring注入方式
    Java高性能编程-java基础-1.1.5线程通信
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/12175092.html
Copyright © 2011-2022 走看看