Vue v-for渲染頁面，獲取不到DOM元素解析

CastlePeaK 發(fā)布于2019-08-22 18:12 / 2325人閱讀

摘要：近期在開發(fā)中發(fā)現(xiàn)了在某些特定情況下，出現(xiàn)了獲取不到渲染出來的元素的情況，原因身為小白的我暫時還沒搞清楚忘大佬指出，但是卻得出來初步的解決方案。最終發(fā)現(xiàn)將數(shù)據(jù)初始化放到里面即可在里面正確輸出獲取到元素的長度。

v-for 渲染循環(huán)渲染頁面的出現(xiàn)讓我們告別了繁瑣的JS拼接，在開發(fā)上面節(jié)省了很多時間。
近期在開發(fā)中發(fā)現(xiàn)了在某些特定情況下，出現(xiàn)了獲取不到渲染出來的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。

最終發(fā)現(xiàn)將數(shù)據(jù)初始化放到 beforeMount 里面即可在 mounted 里面正確輸出獲取到 li 元素的長度。

JS 代碼（解決方案）

// 解決方案一（數(shù)據(jù)初始化放在掛載之前）
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自帶鉤子函數(shù)$nextTick做處理）
mounted: function () {
    this.getList();
    this.$nextTick(function () {
          var li = document.querySelectorAll("li");
          console.log(li.length)  // 輸出 5
    })
}

云服務器 GPU云服務器 dom獲取元素 DOM渲染 DOM元素 vue條件渲染

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/95601.html

后端開發(fā)者的Vue學習之路（一）

摘要：如果我們作為一個后端開發(fā)者想掌握一個前端框架，是一個好選擇，因為它足夠的易學。是語言的下一代標準。數(shù)據(jù)方法生命周期鉤子函數(shù)其他有些內容比較重要，留到后面講定義數(shù)據(jù)定義數(shù)據(jù)定義了數(shù)據(jù)，那么就可以在管理的區(qū)域中使用的獲取數(shù)據(jù)的語法來獲取數(shù)據(jù)。目錄前言： iview組件庫示例 element組件庫示例 ...

番茄西紅柿 2019-04-23 11:52 評論0 收藏0
前端面試--vue

摘要：注意重點是獲取更新后的就是在開發(fā)過程中有個需求是需要在階段操作數(shù)據(jù)更新后的節(jié)點這時候就需要用到就是用來知道什么時候更新完成原因在鉤子函數(shù)執(zhí)行的時候其實并未進行任何渲染，而此時進行操作無異于徒勞，所以在中一定要將操作的代碼放進的回調函數(shù)中。 1. 最簡單的vue el: dom節(jié)點 data: 數(shù)據(jù) Vue 測試實例 - 菜鳥教程(runoob.com) ...

coordinate35 2019-08-26 13:45 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；View 代表UI視圖，負責數(shù)據(jù)的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
Vue面試中，經(jīng)常會被問到的面試題/Vue知識點整理

摘要：可以在該鉤子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。我工作中只用到，對和不怎么熟與的區(qū)別相同點都支持指令內置指令和自定義指令都支持過濾器內置過濾器和自定義過濾器都支持雙向數(shù)據(jù)綁定都不支持低端瀏覽器。看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是...

mengbo 2019-08-23 11:54 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0