Vue.js - 루트 요소가 v-for를 가질 수 없고 분할 래퍼가 필요한 이유

Vue.js - 루트 요소가 v-for를 가질 수 없고 분할 래퍼가 필요한 이유

나는 왜 내가 Vue에 있는 이 템플릿에 메인 포장 디브가 필요한지에 대한 설명을 찾고 있다.그것 없이, 만약 주 원소가 디브인 경우v-for- 그러면 품목 리스트가 작동을 멈춘다.

<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']출처 데이터로서모든 것이 잘 돌아가지만, 바깥쪽 칸을 제거하면 작동을 멈추게 된다.

템플릿은 하나의 루트 요소만 가질 수 있다.V-for는 여러 루트 요소를 반환하므로 요소 내부에 포함시켜야 한다.

이게 도움이 되길 바래!!

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.

다시 한번 봐봐blog-posthttps://vuejs.org/v2/guide/components.html#A-Single-Root-Element에서 샘플을 채취하다.

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

참조URL: https://stackoverflow.com/questions/53258034/vue-js-why-root-element-can-not-have-the-v-for-and-needs-div-wrapper