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