CODEWITHSUNDEEP
webpackvuejs2vue-component
user1392902
user1392902

Reputation:

Vuejs: Template only has one root element, but fails to compile saying it should only have one root element

I have this code in my component template 

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

And my webpack build is failing with the following 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

But I'm a little confused. I have a wrapping DIV to act as the root element, and only have one of them.

When I delete the form the template compiles without error so it seems to be detecting the form as a root element but it's clearly inside my root DIV.

Upvotes: 2

Views: 122

Answers (1)

thanksd
thanksd

Reputation: 55644

You have v-for"note in notes", which should be v-for="note in notes".

My guess is the compiler just ignores that starting <div> tag and so it thinks that the closing </div> for the v-for is closing the root <div>.

Upvotes: 1

Related Questions