vue this.$ does not get value
passvue dynamically gets the scrolling height of the remaining areaIn the requirement, fixed height. If we cannot get data through the previous method (this.$) when a component (using v-if in the component), what should we do?
<template>
<div class="introduce" v-if="(entryObj) !== '{}'">
...
</div>
</template>At this moment, we can use nextTick in the child component mounted hook to pass to the parent component.
this.$nextTick(() => { //Use nextTick to ensure that all dom elements have been rendered. this.$emit('eventGetHeight',this.$);
});The eventGetHeight event is listened to in the parent component and get this data.
<introduce :entryObj="intrObj" v-show="!dialogShow" @openDialog="open" @eventGetHeight="getHeight" ref="intr" ></introduce>
After obtaining the screen height and fixed height, we can calculate the scrolling height of the content area.
getHeight(data){
let clientHeight = || ;
= (clientHeight - data) +'px'
},Just set properties dynamically in the content area.
<div style="overflow-x: hidden; overflow-y: scroll;" :style="{ height: scrollHeight }">
...
</div>Notice:The called component is used in conjunction with v-if, and the component's data is dynamic, that is, the height is dynamic.
Ref is not responsive, and all dynamically loaded template updates cannot change accordingly.
After the child component is rendered successfully (that is, dynamic data is obtained), it is passed to the parent component, and then the scrolling area is calculated.
Use of ref in vue (this.$refs is obtained as empty)
But there is a way, we can use
this.$nextTick(() => {
// todo
})
setTimeout(() => {
// todo
}, 0)To get the data
ref
- It is created as a rendering result, and cannot access them during the initial rendering, and does not exist.
- $refs is not responsive and is only filled after component rendering is completed.
- Used to register reference information of element or child component. After registration, it will be registered on the parent component $refs object.
If what you get is always empty, please pay attention
1. Where did you call and the object you call
- Try calling in mounted() is effective
- Does the object called exist originally, or it still appears after data rendering. Similarly, call it in mounted() to see
2. Is the call object an array list?
- I set the ref on the v-for list at the beginning and directly get this.$, which is always empty.
- Later I discovered that this.$ is an array and cannot get the style through .style.
- Only this.$ array can be traversed and styled on this.$[index]
// Update, this statement is a bit problematic
But like height width, you can get it by offsetHeight, etc.
3. Whether the call object is used in combination with v-if
- Ref is not responsive, and all dynamically loaded template updates cannot change accordingly.
at last
In use, I found that $ can only set the style of the object, and the obtained values are all empty
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.