When using the Vue framework, sometimes you need to call the method after Vue’s page data is rendered, otherwise the accurate data cannot be obtained, especially when obtaining the height of the list, since the data has not been loaded, the accurate height cannot be obtained. Before, when using jquery, there was ready to help us implement it, but Vue does not have such methods. We need to combine watch and this.$nextTick() to implement it.
nextTick：Execute a delayed callback after the next DOM update loop ends.
watch：Used to observe data changes on Vue instances. Corresponding to an object, the key is the observation expression, and the value is the corresponding callback.
I used nextTick like this before:
mounted:{
this.$nextTick(function(){
/////method
})
}
After testing, it was found that the required effect could not be achieved, only structure and no data, that is, the desired height could not be obtained.
Later I found that I need to combine watch to listen for a certain attribute:
watch:{
asyncArray:function()
this.$nextTick(function(){
//////method });
}
}
Tested to be available!
The above Vue call method after the page data rendering is all the content I share with you. I hope it can give you a reference and I hope you support me more.