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

CastlePeaK 發布于2019-08-22 18:12 / 2226人閱讀

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

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

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

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

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

后端開發者的Vue學習之路（一）

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

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

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

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

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

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

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

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

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

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