Vue v-for渲染页面，获取不到DOM元素解析

CastlePeaK 发布于2019-08-22 18:12 / 2047人阅读

摘要：近期在开发中发现了在某些特定情况下，出现了获取不到渲染出来的元素的情况，原因身为小白的我暂时还没搞清楚忘大佬指出，但是却得出来初步的解决方案。最终发现将数据初始化放到里面即可在里面正确输出获取到元素的长度。

v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接，在开发上面节省了很多时间。
近期在开发中发现了在某些特定情况下，出现了获取不到渲染出来的DOM元素的情况，原因身为小白的我暂时还没搞清楚（忘大佬指出），但是却得出来初步的解决方案。

HTML 代码


  {{item.age}}

JS 代码（错误代码）

// 错误代码示例一
var vm = new Vue({
    el: "#app",
    data: {
        abc: new Object()
    },
    mounted: function () {
        this.getList();
        var li = document.querySelectorAll("li");
        console.log(li.length);     // 输出0
    },
    methods: {
        getList: function () {
             var data = [
                 { name: "1", age: "21" },
                 { name: "2", age: "22" },
                 { name: "3", age: "23" },
                 { name: "4", age: "24" },
                 { name: "5", age: "25" }
             ];
             this.$set(this, "abc", data);
         }
    }
})

// 错误代码示例二
var vm;
window.onload = function(){
    vm = { ... } // 实例化代码如上，去除 mounted 生命周期
    vm.getList();
    var li = document.querySelectorAll("li");
    console.log(li.length);     // 输出0
}

上述代码中的 li 即是通过 v-for 渲染生成，但是两种方式获取 li 输出的长度都为0。

最终发现将数据初始化放到 beforeMount 里面即可在 mounted 里面正确输出获取到 li 元素的长度。

JS 代码（解决方案）

// 解决方案一（数据初始化放在挂载之前）
var vm = new Vue({
    el: "#app",
    data: {
        abc: new Object()
    },
    beforeMount: function(){
         this.getList();
    },
    mounted: function () {
         var li = document.querySelectorAll("li");
         console.log(li.length)     // 输出5
    },
    methods: {
        getList: function () {
             var data = [
                 { name: "1", age: "21" },
                 { name: "2", age: "22" },
                 { name: "3", age: "23" },
                 { name: "4", age: "24" },
                 { name: "5", age: "25" }
             ];
             this.$set(this, "abc", data);
       }
    }
}) 

// 解决方案二（mounted周期里面使用VUE自带钩子函数$nextTick做处理）
mounted: function () {
    this.getList();
    this.$nextTick(function () {
          var li = document.querySelectorAll("li");
          console.log(li.length)  // 输出 5
    })
}

GPU云服务器云服务器 dom获取元素 DOM渲染 DOM元素 vue条件渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95601.html

后端开发者的Vue学习之路（一）

摘要：如果我们作为一个后端开发者想掌握一个前端框架，是一个好选择，因为它足够的易学。是语言的下一代标准。数据方法生命周期钩子函数其他有些内容比较重要，留到后面讲定义数据定义数据定义了数据，那么就可以在管理的区域中使用的获取数据的语法来获取数据。目录前言： iview组件库示例 element组件库示例 ...

番茄西红柿 2019-04-23 11:52 评论0 收藏0
前端面试--vue

摘要：注意重点是获取更新后的就是在开发过程中有个需求是需要在阶段操作数据更新后的节点这时候就需要用到就是用来知道什么时候更新完成原因在钩子函数执行的时候其实并未进行任何渲染，而此时进行操作无异于徒劳，所以在中一定要将操作的代码放进的回调函数中。 1. 最简单的vue el: dom节点 data: 数据 Vue 测试实例 - 菜鸟教程(runoob.com) ...

coordinate35 2019-08-26 13:45 评论0 收藏0
vue面试

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。路由的钩子函数首页可以控制导航跳转，，等，一般用于页面的修改。谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；...

vspiders 2019-08-23 18:38 评论0 收藏0
Vue面试中，经常会被问到的面试题/Vue知识点整理

摘要：可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。我工作中只用到，对和不怎么熟与的区别相同点都支持指令内置指令和自定义指令都支持过滤器内置过滤器和自定义过滤器都支持双向数据绑定都不支持低端浏览器。看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是...

mengbo 2019-08-23 11:54 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0