javascript - Vue.js - 为什么根元素不能有 v-for 并且需要 div 包装器

Question

我正在寻求解释为什么我需要在 Vue 的这个模板中使用主包装 div。没有它，如果主要元素是带有 v-for 的 div - 那么项目列表将停止工作。

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

数据是在源代码中定义的，没有 ajax，在主应用程序中我只是使用一个组件，它有一个属性告诉要使用哪些数据:

<devlistitems dataitems="json_items" />

意思是使用APP_DATA['json_items']作为源数据。一切正常，但删除外部 div 使其停止工作。

Answer 1

Template 只能有一个根元素。V-for 返回多个根元素，所以需要将其封装在一个元素内。

希望这对您有所帮助!