Vue js Fehler: Component Vorlage sollte genau ein Wurzelelement enthalten

Question

Ich weiß nicht, was der Fehler ist, bis jetzt teste ich durch Konsolenprotokoll nach Änderungen nach dem Auswählen einer Datei (zum Hochladen) zu überprüfen.

Wenn ich $ npm run watch laufen, bekomme ich folgende Fehlermeldung:

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

Mein File.vue ist

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

Alle Ideen, wie dieses Problem zu lösen? Was ist eigentlich der Fehler?

Answer 1

Sie haben zwei Stammelemente in Ihrer Vorlage.

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

Und Sie brauchen einen.

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

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

Wesentlichen in Vue Sie müssen haben nur ein Wurzelelement in Ihren Vorlagen.

Answer 2

Sie müssen alle HTML in ein einzelnes Element umhüllen.

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