About the problem that Vue components cannot get elements through Dom

Problem Description:

Recently, I wanted to make a better-looking login interface, so I searched for relevant materials on codepen. Under normal circumstances, there is no problem in switching page elements, but when I was about to package the vue components, I found that the page style could not be changed. The related operations of document.querySelector cannot obtain elements, and the returned value is always null. Therefore the associated style change cannot take effect.

problem analysis:

Vue recommends using template to create HTML. But templates are templates after all, not real dom nodes. Vue will first use the render function in the object to generate a virtual node and mount it. The mounted real DOM is rendered asynchronously, and it is also rendered asynchronously after the state is modified. The document.querySelector operation is defined as a synchronous task in the code, and the event queue should be:

• Synchronization queue: get dom element,
• Asynchronous queue: transfer from virtual node to real node and render

According to the execution process of synchronous first and then asynchronous, dom elements cannot be obtained

solution:

Since the DOM cannot be obtained directly, you can try the operation of related elements after the component is loaded. 1. Use the setTimeout method to execute the operation of obtaining dom elements after a period of time (this time is very short) after dynamically creating elements. Or use window.addEventListener("load", method name) to operate after the page is loaded;

Just move the relevant position in the source code to get the dom'element operation

<script >

let getButtons = (e) => e.preventDefault()

let changeForm = (e) => {
    let switchC1 = document.querySelector("#switch-c1");
    let switchC2 = document.querySelector("#switch-c2");
    let switchCircle = document.querySelectorAll(".switch__circle");
    
    let aContainer = document.querySelector("#a-container");
    let bContainer = document.querySelector("#b-container");
    let switchCtn = document.querySelector("#switch-cnt");
    switchCtn.classList.add("is-gx");
    setTimeout(function(){
        switchCtn.classList.remove("is-gx");
    }, 1500)

    switchCtn.classList.toggle("is-txr");
    switchCircle[0].classList.toggle("is-txr");
    switchCircle[1].classList.toggle("is-txr");
    switchC1.classList.toggle("is-hidden");
    switchC2.classList.toggle("is-hidden");
    aContainer.classList.toggle("is-txl");
    bContainer.classList.toggle("is-txl");
    bContainer.classList.toggle("is-z200");
}
let mainF = (e) => {
    let allButtons = document.querySelectorAll(".submit");
    let switchBtn = document.querySelectorAll(".switch-btn");
    for (var i = 0; i < allButtons.length; i++)
        allButtons[i].addEventListener("click", getButtons );
    for (var i = 0; i < switchBtn.length; i++)
        switchBtn[i].addEventListener("click", changeForm)
}
window.addEventListener("load", mainF);
</script>

Project source address:

https://codepen.io/ricardoolivaalonso/pen/YzyaRPNhttps://codepen.io/ricardoolivaalonso/pen/YzyaRPN

Afterwards, a complete analysis of the project will be conducted. Interested friends can study with me, and please correct me.