Vue js錯誤：組件模板應該只包含一個根元素

我不知道錯誤是什麼，到目前爲止，我正在通過控制檯日誌進行測試，以在選擇文件（用於上傳）後檢查更改。Vue js錯誤：組件模板應該只包含一個根元素

當我運行$ 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>

如何解決這個任何想法？什麼是實際的錯誤？

來源

2017-07-09 Pathros

您的模板中有兩個根元素。

<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公司，你必須有在模板中只有一個根元素。

來源

2017-07-09 20:05:58 Bert

您需要將所有html包裝到一個單一元素中。

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

來源

2017-07-09 20:07:51 Hamoud

Vue js錯誤：組件模板應該只包含一個根元素

回答

相關問題