Question

请，任何人都可以对初学者进行解释和帮助理解，为什么我需要此模板中的主要包装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

模板只能有一个根元素。V-for返回多个根元素，因此有必要将其包含在一个元素中。

希望这会有所帮助！

Answer 2

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

每个组件都必须有一个根元素

作为该站点的示例，这将不起作用

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

要解决此问题，您可以执行以下操作：

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

您需要重新设计此组件。该组件为loop internally管理。您可以使一个哑元组件仅显示一个item。父级循环显示item。

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

上查看blog-post示例

Answer 3

Vue只能有一个根元素错误：

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

正确：

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

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

Vue JS-为什么根元素无法使用v-for并且需要div包装器

3 个答案: