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-if来链接它们

但我有点困惑。我有一个包装DIV作为根元素，只有一个。

当我删除表单时，模板编译时没有错误，因此它似乎将表单检测为根元素，但它明显位于我的根DIV中。

Answer 1

您有v-for"note in notes"，应为v-for="note in notes"。

我的猜测是编译器忽略了开始<div>标记，因此它认为</div>的结束v-for正在关闭根<div>。

Vuejs：模板只有一个根元素，但无法编译说它应该只有一个根元素

1 个答案: