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

user_838652 0
Viewed 2526

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.

vue-component vue.js html javascript
3 Answers

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

user_104999100

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

user_26480770
user_106021600
Related