脚本宝典收集整理的这篇文章主要介绍了Vue v-for渲染页面，获取不到DOM元素解析，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

• HTML 代码

<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：384754419，请注明来意。