close

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

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Vue js error: Component template should contain exactly one root element in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Vue js error: Component template should contain exactly one root element Error Occurs?

Today I get the following error Vue js error: Component template should contain exactly one root element in javascript.

How To Solve Vue js error: Component template should contain exactly one root element Error ?

  1. How To Solve Vue js error: Component template should contain exactly one root element Error ?

    To Solve Vue js error: Component template should contain exactly one root element Error In addition to Bert and blobmaster responses:
    If you need to remove the root element from the DOM you can exploit css and use display: value on the root element.

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

    To Solve Vue js error: Component template should contain exactly one root element Error In addition to Bert and blobmaster responses:
    If you need to remove the root element from the DOM you can exploit css and use display: value on the root element.

Solution 1


You need to wrap all the html into one single element.

<template>
   <div>
        <div class="form-group">
            <label for="avatar" class="control-label">Avatar</label>
            <input type="file" v-on:change="fileChange" id="avatar">
            <div class="help-block">
                Help block here updated 4 🍸 ...
            </div>
        </div>

        <div class="col-md-6">
            <input type="hidden" name="avatar_id">
            <img class="avatar" title="Current avatar">
        </div>
   </div>

</template>

<script>
    export default{
        methods: {
            fileChange(){
                console.log('Test of file input change')
            }
        }
    }
</script>

Solution 2

In addition to Bert and blobmaster responses:

If you need to remove the root element from the DOM you can exploit css and use display: value on the root element.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment