CODEWITHSUNDEEP
javascripthtmlvue.jsvue-component
Peminator
Peminator

Reputation: 852

Vue.js - why root element can not have the v-for and needs div wrapper

I am seeking an explanation of why I need the main wrapping div in this template in Vue. Without it, if the main element is the div with v-for - then listing of items stops working.

<script type="text/x-template" id="devlistitem">
<div><div class="item" v-for="item in cd_items">
    <div v-if="!item.u" class="heade">{{ item.p }}</div>
<div v-if="item.desc" class="desc">{{ item.desc }}</div>
  </div></div>
  </script>

<script>// component
Vue.component('devlistitems', { 
  props: ['dataitems']
  , computed: { cd_items: function () { 
   var x = this.dataitems; return APP_DATA[x];  }
  } 
  , template:'#devlistitem'}
);</script>

Data are defined right in source, no ajax, and in main app I simply use a component with a property telling which data to use:

<devlistitems dataitems="json_items" />

Meaning to use APP_DATA['json_items'] as source data. Everything works ok, but removing the outer div makes it stop working.

Upvotes: 2

Views: 3083

Answers (3)

Alireza Fattahi
Alireza Fattahi

Reputation: 45515

According to https://v2.vuejs.org/v2/guide/components.html#A-Single-Root-Element

Every component must have a single root element

As a sample from the site, this will not work

<h3>{{ title }}</h3>
<div v-html="content"></div>

To fix you can do some thing like:

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

You need to re-design this component. The component manages the for loop internally. You can have a dumb component that only shows one item. The parent loops and shows item.

Again have a look atblog-post sample at the https://v2.vuejs.org/v2/guide/components.html#A-Single-Root-Element

Upvotes: 2

Hamilton Gabriel
Hamilton Gabriel

Reputation: 367

Vue can only have A Single Root Element Error:

<div><p>Text</p></div>
<div><p>Text2</p></div>

Correct:

<div>
 <div><p>Text</p></div>
 <div><p>Text2</p></div>
</div>

https://v2.vuejs.org/v2/guide/components.html#A-Single-Root-Element

Upvotes: 0

Bharathkumar kamal
Bharathkumar kamal

Reputation: 211

Template can have only one root element.V-for returns multiple root elements, so it's necessary to enclose it inside an element.

Hope this helps!!

Upvotes: 4

Related Questions