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
    })
}

本文固定链接: http://www.js-code.com/vue-js/vue-js_26665.html