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

})

}

總結

以上是生活随笔為你收集整理的获取不到html页面上的元素,Vue v-for渲染页面，获取不到DOM元素解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。