Vuejs：模板只有一個根元素，但無法編譯說它應該只有一個根元素

Question

我在組件模板有這樣的代碼

<template> 
    <div> 
    <div class="row note" v-for"note in notes"> 
     <div class="col-sm-3 col-md-2"> 
     <div class="thumbnail"> 
      <img src="/images/alec-joy.jpg">  
     </div> 
     </div> 
     <div class="col-sm-9 col-md-10"> 
     <h4> 
      {{note.author}} - 
      <small>{{note.author.role}}</small> 
      <small class="pull-right">{{note.created_at}}</small> 
     </h4> 
      <p>{{note.body}}</p> 
     </div> 
    </div> 
    <form action="#" @submit.prevent="createNote()"> 
     <div class="row"> 
     <div class="col-sm-8 col-sm-offset-2"> 
      <div class="form-group"> 
      <textarea rows="3" v-model="note.body" class="form-control"></textarea> 
      </div> 
     </div> 
     <div class="col-sm-2"> 
      <button type="submit" class="btn btn-primary">Add Note</button> 
     </div> 
     </div> 
    </form> 
    </div> 
</template> 

而我的WebPack構建與以下錯誤

失敗

組件模板應該只包含一個根元素。如果您在多個元素上使用v-if，請使用v-else-如果要將它們鏈接起來，請改爲

但是我有點困惑。我有一個包裝DIV作爲根元素，只有其中一個。

當我刪除表單模板編譯沒有錯誤，所以它似乎檢測到的形式作爲一個根元素，但它顯然是在我的根DIV。

Answer 1

您有v-for"note in notes"，應該是v-for="note in notes"。

我的猜測是編譯器只是忽略了開始<div>標籤，所以它認爲，對於v-for收盤</div>被關閉根<div>。