如何在 Vue.js 中訪問 DOM

Question

我正在嘗試使用 Vue.js 訪問 DOM。 我正在 mount() 生命周期內編寫代碼，但是我沒有得到任何結果。

該代碼使用 vanilla JavaScript 運行得非常好。

我正在使用 v-html 指令在 span 標簽中插入 html。

    <span class="email" v-html="text"></span>

然后在安裝的生命周期中

  mounted() {
    let images = document.getElementsByClassName(
      "mcnImageCardBottomImageContent"
    );
    console.log(images);
    // It is returning an empty array
 
  },

如何訪問 Vue.js 中的 DOM？

Answer 1

您需要知道您在 Vue.js 或 react 中看到的 HTML 標記並不是真正的 HTML 標記。 它被解析為純 javascript 對象，到虛擬 DOM。

您需要等到 vuejs 呈現其虛擬 DOM。 你可以用this.$nextTick()

mounted() {
   this.$nextTick(() => {
      let images = document.getElementsByClassName(
        "mcnImageCardBottomImageContent"
      );
      console.log(images);
        // It is returning an empty array
      })
}

Answer 2

這樣的東西會起作用嗎？ :)

  mounted() {
    document.onreadystatechange = () => {
      if (document.readyState === "complete") {
        console.log("Page loaded");
        // Do stuff here
      }
    };
  }