The div in the vue component cannot be displayed

When we use the <div> tag in a Vue component, if no relevant styles are set or content is added, the <div> 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:

1. Components with parent components (card slot content)
2. Components without parent components ( Root component)
3. 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 <div> 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:

<template>
  <div class="container">
    <h1>这是标题</h1>
  </div>
  <div class="box">
    <p>这是内容</p>
  </div>
</template>

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:

<template>
  <div>
    <div class="container">
      <h1>这是标题</h1>
    </div>
    <div class="box">
      <p>这是内容</p>
    </div>
  </div>
</template>

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:

<template>
  <div v-show="false">这是内容</div>
  <div v-if="false">这是内容</div>
</template>

In the above code, because of the expressions of v-show="false" and v-if="false" Both are false, so these two <div> 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 <div> tag may not be rendered. The problem.

For example:

<template>
  <div>
    <slot></slot>
  </div>
</template>

In the above code, since no content or style is added to the <div> tag, the <div># The ## tag looks like it's not being rendered.

Solution: Add some content or style to the

<div> tag to make it display, as shown below:

<template>
  <div>
    <slot></slot>
    <div class="container">这是新添加的内容</div>
  </div>
</template>

3. Summary

The problem of using

<div> 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!