Vue must have only one root element per component, which leads to unnecessary nesting of dom. How can this be avoided?


                {{item.desc}}
            </article>
        </div>    
    </template>
    

this div causes dom to have an extra layer of nesting?! I don"t really need this div xx. Is there a solution? Beginners seek advice

May.15,2022

if vue 1.0is allowed to go directly to the element that needs to be displayed under template, but it is officially recommended to wrap a parent element outside.

when it comes to vue2.0, you must wrap a parent element on the outside, otherwise it will not be displayed.


you can do this directly

<template>
    <article v-for="item for list" :key="item.id">
        {{item.desc}}
    </article> 
</template>

< template >

<article v-for="item for list" :key="item.id">
    {{item.desc}}
</article>

< / template >

just do it.


you can replace div tags with semantic tags as far as possible, such as main , sidebar aside , or section . In addition, if you want to control the overall style of this component, one more parent package is convenient for style management.


you can think differently about refactoring components to avoid having multiple siblings in one component.

Menu