Home  >  Article  >  Web Front-end  >  What should I do if vue cannot get the id attribute?

What should I do if vue cannot get the id attribute?

藏色散人
藏色散人Original
2023-01-29 14:03:172121browse

Vue cannot obtain the id attribute because getElementById is used in the "created()" hook function, and Vue has not yet completed mounting; the solution is to change "created() {let serachBox = document. getElementById('searchBox');...}" code can be migrated to the "mounted()" hook function.

What should I do if vue cannot get the id attribute?

The operating environment of this tutorial: Windows 10 system, vue3 version, DELL G3 computer

What should I do if vue cannot obtain the id attribute?

The result of using getElementById in Vue is that the returned element is null?

  • First of all, I used such a requirement in the project to dynamically calculate the height of the main area based on the client screen size.

When I get this requirement, my first idea is to get the size of the fixed element through element.getBoundingClientRect, and then get the size of the fixed element through document.body.offsetHeight The height of the view area, and finally the size of the main area is dynamically calculated.

Use getElementById in created()

After confirming the idea, I started coding, so I wrote the following code in created:

//此处省去无关代码
created() {
	let serachBox = document.getElementById('searchBox');
	let searchRect = serachBox .getBoundingClientRect();
	console.log('rect',searchRect );
	let dffsetHeight = document.body.offsetHeight;
	this.tHeight = ( dffsetHeight - searchRect .bottom - 100 );},

As a result, the console reported an error directly. The error was as follows:
What should I do if vue cannot get the id attribute?

According to the error description, I printed the searchBox element upwards. At this time, the console printed the result as null. , this is a bit interesting.

Using getElementById in mounted()

Looking carefully, it turns out that I used getElementById in the created() hook function. At this time Vue has not completed mounting, so it cannot obtain the Dom element through getElementById, so the console prints null. After finding the reason, I migrated the above code to the mounted() hook function, and the console printed the correct result.
What should I do if vue cannot get the id attribute?

Although the problem was found, the rendering result of the page could not meet my needs. We have to continue to find a way.

Created() is combined with this.$nextTick() to achieve business requirements

Finally created() is combined with this.$nextTick() to achieve business requirements The final code is as follows:

created() {
	this.$nextTick(function () {
		let serachBox = document.getElementById('searchBox');
		let searchRect = serachBox .getBoundingClientRect();
		console.log('rect',searchRect );
		let dffsetHeight = document.body.offsetHeight;
		this.tHeight = ( dffsetHeight - searchRect .bottom - 100 );
	 })},

Summary

This bug is mainly caused by two aspects.

  • First, I habitually handle business logic in the created hook function

  • The second reason is that I am not familiar enough with the life cycle of Vue, and I made a mistake. confused.

Recommended learning: "vue video tutorial"

The above is the detailed content of What should I do if vue cannot get the id attribute?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn