v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接，在开发上面节省了很多时间。

近期在开发中发现了在某些特定情况下，出现了获取不到渲染出来的DOM元素的情况，原因身为小白的我暂时还没搞清楚(忘大佬指出)，但是却得出来初步的解决方案。

HTML 代遇新是直朋能到码

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

})

}