Vue jsエラー：コンポーネントテンプレートには正確に1つのルート要素が含まれている必要があります

Question

これまでのところ、私はコンソールログを通じてファイルを選択してアップロードを確認しています。

私は$ npm run watchを実行すると、私は次のエラーを取得する：

"Webpack is watching the files…

95% emitting

ERROR Failed to compile with 1 errors
19:42:29

error in ./resources/assets/js/components/File.vue

(Emitted value instead of an instance of Error) Vue template syntax error:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

@ ./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> 

これを解決する方法上の任意のアイデアですか？実際にはどのようなエラーですか？

Answer 1

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

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

あなたが必要です。

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

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

は基本的にVueの中で、あなたはは、テンプレートで唯一のルート要素を持っている必要があります 。

Answer 2

すべてのhtmlを1つの要素にまとめる必要があります。

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