[解決済み] Vue jsのエラーです。コンポーネントテンプレートは、正確に1つのルート要素を含む必要があります

質問

今のところ、コンソールログから、ファイル選択後の変更（アップロード用）を確認するテストを行っていますが、エラーの原因がわかりません。

私が実行するとき $ npm run watch を実行すると、以下のエラーが発生します。

"Webpackはファイルを監視しています...

95%発光

ERROR コンパイルに失敗し、1つのエラーが発生しました。

19:42:29

./resources/assets/js/components/File.vueでエラーが発生しました。

(Errorのインスタンスではなく値を放出) Vueテンプレートの構文 のエラーです。

コンポーネントテンプレートは、正確に1つのルート要素を含む必要があります。もし 複数の要素でv-ifを使用している場合は、v-else-ifを使用して連鎖させます。 を使用してください。

./resources/assets/js/components/AvatarUpload.vue 5:2-181 @。 ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss"

私のFile.vueは

<template>
        <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>
</template>

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

これを解決する方法について何かアイデアはありますか？実際にどのようなエラーが発生しているのでしょうか？

どのように解決するのですか？

注意 この回答は、Vueのバージョン2.xにのみ適用されます。 バージョン3はこの制限を解除しました .

テンプレートに2つのルート要素があります。

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

そして、あなたは1つを必要とします。

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

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

基本的に は、Vueでは が必要です。 は、テンプレート内で1つのルート要素のみ .