脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

<div id="app">
  <li v-for="item in abc" :name="{{item.name}}">{{item.age}}</li>
</div>
  • 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
    })
}

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过