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

Posted 2023-02-23

【中文标题】Vuejs：模板只有一个根元素，但编译失败说它应该只有一个根元素

【英文标题】：Vuejs: Template only has one root element, but fails to compile saying it should only have one root element

【发布时间】：2018-02-10 20:34:10

【问题描述】：

我的组件模板中有这段代码

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

【问题讨论】：

通常我会投票关闭一个错字问题，但这个错误不是你所期望的，我认为这可以帮助未来的人们。

【参考方案1】：

你有v-for"note in notes"，应该是v-for="note in notes"。

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