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

admin管理员组

文章数量:1426642

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>// ponent
Vueponent('devlistitems', { 
  props: ['dataitems']
  , puted: { 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 ponent 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.

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>// ponent
Vue.ponent('devlistitems', { 
  props: ['dataitems']
  , puted: { 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 ponent 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.

• javascript
• html
• vue.js
• vue-ponent

Share Improve this question Follow edited Apr 17, 2020 at 17:06 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Nov 12, 2018 at 8:08 PeminatorPeminator 86211 gold badge1313 silver badges2727 bronze badges 1

• and second - the root element does not let me replace it with <template> instead of <div> - sstops working again – Peminator Commented Nov 12, 2018 at 9:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

Every ponent 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 ponent. The ponent manages the for loop internally. You can have a dumb ponent that only shows one item. The parent loops and shows item.

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

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/v2/guide/ponents.html#A-Single-Root-Element

本文标签： javascriptVuejswhy root element can not have the vfor and needs div wrapperStack Overflow