Bug

[Vue.js] error: Component template should contain exactly one root element

brightlightkim 2022. 3. 31. 11:43

https://stackoverflow.com/questions/45000510/vue-js-error-component-template-should-contain-exactly-one-root-element

 

Vue js error: Component template should contain exactly one root element

I don't know what the error is, so far I am testing through console log to check for changes after selecting a file (for uploading). When I run $ npm run watch, i get the following error: "Webp...

stackoverflow.com

 

Note This answer only applies to version 2.x of Vue. Version 3 has lifted this restriction.

You have two root elements in your template.

<div class="form-group">
  ...
</div>
<div class="col-md-6">
  ...
</div>

And you need one.

<div>
    <div class="form-group">
      ...
    </div>

    <div class="col-md-6">
      ...
    </div>
</div>

Essentially in Vue you must have only one root element in your templates.

 

The best answer