Vue cannot obtain after loading the dom element asynchronously
Vue has a lot of asynchronous loading problems, such as dynamic creation of dom elements. If you immediately get the created dom elements, you cannot get it.
Solution
The first method is to compare low, use the setTimeout method, so that the code that gets the dom will be executed for a period of time after dynamically creating the element (this time is very short). But this method should be risky and is not recommended.
The second method is to put a layer of this.$nextTick() on the code to be executed
For example:
this.$nextTick(function() {
let grids = _that.$;
(grids);
for (let i = 0; i < ; i++) {
let xb = grids[i].getAttribute("index");
//alert(xb);
if (_that.(xb) != -1) {
grids[i].setAttribute("ifSelect", "true");
grids[i]. = "#b3d8ff";
grids[i]. = "#409eff";
}
}
});vue robustly obtains dom elements
1. Get the Dom element in the Element's pop-up box
**Because the pop-up frame is controlled by v-if, the Dom element does not exist when the initial page is rendered, so in mounted, the Dom element of the pop-up frame cannot be obtained and the native time cannot be added. The following loading**
The following provides a robust way to obtain the Dom elements in the bullet frame.
First of all, since the pop-up box is judged by v-if, you can listen to the variable corresponding to v-if in the watch. When true, the pop-up box opens. At this time, you can get the DOM element and find that it still cannot be obtained. . . .
At this time, you need to convert the get event to asynchronous execution, that is, write it in setTimeout, just do it. It is more stable and can be written in nextTck.
(There will still be problems)
If the pop-up box callback provided by Element (the pop-up box opens the animation ends), it can be guaranteed to be retrieved.
<el-dialog :="dialogVisible" ref="dialog" @opened="dialogOpened" >
dialogOpened() {
this.$nextTick(() => {
setTimeout(() => {
let scrollContent = ("scrollContent");
if (scrollContent) {
("scroll", );
("Get scrolling node----");
} else {
("No scrolling node was obtained====");
}
});
});
}2. If none of the above methods can be solved
Because the data may be obtained asynchronously and then filled in the DOM, you can perform the operation of obtaining the DOM in the update function, but at this time, many restrictions need to be added because it is impossible to limit the update caused by whom! The flag bit needs to be reduced.
You can change the flag bits in the watch listen function.
The premise for having this idea is to nest a tab page in the element UI pop-up box. The DOM will be destroyed every time the tab page is switched, so it is more critical to grasp the timing of DOM acquisition. It can be said that it is quite stable to obtain the modified DOM container based on whether the data in the tab page is rendered.
Problem not to get the components nested in the Element pop-up window
Problem: When nesting components in el-dialog, if el-dialog is not opened, the contents of its internal nested cannot be obtained, and ref cannot be used.
Solution: When browsing through the source code of the Element hidden scrollbar part, it is found that the method to obtain the dom element is to obtain it through computed.
After verification, you can use the calculation attribute to obtain it in the callback opened by the pop-up box.
<el-dialog ref="dialog" @opened="dialogOpened"> <div ref="innerContent"></div> </el-dialog>
computed:{
getInnerDom(){
//At this time, only dialog can be obtained (this.$refs)
return this.$
}
}
methods:{
dialogOpened(){
//At this time, the content node can be obtained ()
}
}Experience
Computation attributes, because there is a cache, will only change when the corresponding dependency changes, while DOM elements only exist and do not exist.
Therefore, when Dialog is not opened, its corresponding dependency is empty, and when the dependency changes, that is, this.$ exists, getInnerDom will change. Much more convenient than getting it in upDated
Key point: I don't know whether computed will be triggered after the height or color of the DOM element changes.
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.