Vue 讀取HTMLCollection列表的length為0問題

2022-06-02 22:00:33

讀取HTMLCollection列表的length為0

在計算better-scroll右側列表捲動高度的時候，發現列表的length為0

原因

上網查閱發現問題可能是由於mounted 不會承諾所有的子元件也都一起被掛載。

這個時候dom元素還有沒掛載完畢。如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：

mounted () {
      this.$nextTick(() => {
      this._initScroll(), this._calculateHeight();
    });  },

但是不清楚為什麼使用了這個方法後獲取的length依舊為0，

就在_calculateHeight()方法上加了個定時器，等到完全渲染完成時再獲取高度（這種問題可能會出現bug，不知道頁面什麼時候渲染完畢）：

_calculateHeight () {
      setTimeout(() => {
        let foodList = this.$refs.right.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (var i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }, 200)
    },

無法讀取HTMLCollection列表的length解決

問題

在學習餓了麼實踐專案時候發現一個問題，

在mounted階段，獲取Element物件，console.log()可以讀取出列表，而卻無法讀出它的length

如下

      let foodList = this.$refs.menuWrapper.getElementsByClassName('calculate-content')
      let height = 0
      console.log(foodList)
      console.log(foodList.length)
      for (var i = 0; i < foodList.length; i++) {
        height += foodList[i].clientHeight
        this.scrollYList.push(height)
      }

原因

以下出自官方檔案

mounted
型別：Function
詳細：
el 被新建立的 vm.$el 替換，並掛載到範例上去之後呼叫該勾點。如果 root 範例掛載了一個檔案內元素，當 mounted 被呼叫時 vm.$el 也在檔案內。

注意 mounted 不會承諾所有的子元件也都一起被掛載。如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

該勾點在伺服器端渲染期間不被呼叫。

看完以上檔案介紹，可以知道在mounted階段，mounted 不會承諾所有的子元件也都一起被掛載，所以在此階段，dom結構還沒載入完，js就執行了

解決方案

1.使用官方檔案說明（如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick 確保渲染完成後再獲取資料。

重要的是理解執行順序，非同步呼叫的話可以使用Promise保證執行順序

踩到的一個坑：

有文章說可以在updated階段執行，這時可以取到渲染完畢後的List

updated：由於資料更改導致的虛擬 DOM 重新渲染和打修補程式，在這之後會呼叫該勾點

就是說，在使用better-scroll捲動時，會觸發updated，使得scrollYList不斷被推入資料，然後導致我用這個的時候，整個瀏

覽器崩潰了，很是尷尬，哈哈哈，所以我感覺updated執行這個解決方案，不大適合解決這類問題

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

Vue 讀取HTMLCollection列表的length為0問題

目錄

讀取HTMLCollection列表的length為0

原因

無法讀取HTMLCollection列表的length解決

問題

原因

解決方案

熱門文章