Home > Article > Web Front-end > The div in the vue component cannot be displayed

The div in the vue component cannot be displayed

王林Original: 2023-05-08 12:09:072064browse

When we use the

tag in a Vue component, if no relevant styles are set or content is added, the

tag may not appear to be used. Render it out. Usually, this is caused by the Vue component doing some special processing on its template.

Let’s analyze possible causes and solutions step by step:

1. Vue component rendering mechanism

Vue components are componentized through templates. Developed, they are classified into three types:

Components with parent components (card slot content)
Components without parent components ( Root component)
Functional component (stateless and there should be no data changes)

Vue’s component rendering mechanism requires that each Vue component must be like an independent and complete Page, that is, each Vue component must have one and only one root element. Therefore, some irregular writing methods may cause the component to fail to render.

2. Frequently Asked Questions

2.1 The Vue component does not add content

If only the

tag is added to the Vue component, no content is added. content, it will look as if it is not rendered.

Solution: Add some content or set related styles to make it display.

2.2 The root element in the Vue component can only be one

When we add multiple root elements to the Vue component, as shown below:

At this time we found that the The component will not be rendered and no error will be reported. This is because Vue stipulates that each component can only have one root element.

Solution: Change it to a form with only one root element, as shown below:

2.3 V-show, v-if and other instructions are used in the Vue component

When we use v-show, v-if and other instructions in the Vue component, because of Vue’s component rendering mechanism, if the expression bound to the instruction is false, the element will not be rendered.

For example:

In the above code, because of the expressions of v-show="false" and v-if="false" Both are false, so these two

tags will not be rendered.

Solution: You can change the expression bound to this directive to true, or add the content or style of the element so that it can be rendered.

2.4 The slot is used in the Vue component

When we use the slot in the Vue component, the

tag may not be rendered. The problem.

For example:

In the above code, since no content or style is added to the

tag, the

# The ## tag looks like it's not being rendered.

Solution: Add some content or style to the

tag to make it display, as shown below:

3. Summary

The problem of using

 tags in Vue components cannot be rendered, usually due to the Vue component rendering mechanism, multiple root nodes, and instruction binding expressions being

false

 Or it is caused by reasons such as no content being added to the slot. We can easily solve this problem by adding some content or styling.

The above is the detailed content of The div in the vue component cannot be displayed. 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

Previous article：How nodejs runsNext article：How nodejs runs

See more