v-for 지시문을 사용하여 VueJS에 여러 루트 요소를 렌더링하는 방법

Question

vuejs에 문제가 있습니다. 지금 바로 NodeJS API가 제공되는 최신 뉴스 게시물을 보여주는 웹 사이트를 만들고자합니다.

나는 다음 시도했다 :

HTML

<div id="news" class="media" v-for="item in posts"> 
     <div> 
     <h4 class="media-heading">{{item.title}}</h4> 
     <p>{{item.msg}}</p> 
     </div> 
    </div> 

에게 자바 스크립트

const news = new Vue({ 
el: '#news', 
data: { 
    posts: [ 
     {title: 'My First News post', msg: 'This is your fist news!'}, 
     {title: 'Cakes are great food', msg: 'Yummy Yummy Yummy'}, 
     {title: 'How to learnVueJS', msg: 'Start Learning!'}, 
    ] 
} 

을})

분명히 위의 코드는 작동하지 않았습니다. Vue는 여러 루트 요소를 렌더링 할 수 없다고 말했기 때문에.

VueJS의 공식 설명서를 찾았는데 해결 방법을 찾지 못했습니다. Google 검색을 한 후, 여러 루트 요소를 렌더링하는 것이 불가능하다는 것을 알고 있었지만 아직 해결 방법을 찾을 수 없었습니다.

해결 방법을 제안 해주세요.

읽어 주셔서 감사합니다.

Answer 1

Vue에는 단일 루트 노드가 있어야합니다. 그러나,이에 HTML을 변경해보십시오 :

<div id="news" > 
    <div class="media" v-for="item in posts"> 
     <h4 class="media-heading">{{item.title}}</h4> 
     <p>{{item.msg}}</p> 
    </div> 
</div> 

이러한 변화는 하나의 루트 노드 ID 아직은 = "뉴스"와 최근 게시물의 목록을 렌더링 할 수 있습니다 수 있습니다.

Answer 2

복수의 루트 요소는 Vue에서 지원하지 않습니다 (이는 v-for 지시어로 인해 하나 이상의 요소를 렌더링 할 수 있기 때문입니다). 또한 매우 간단하게 해결할 수 있습니다. HTML을 다른 요소로 래핑하면됩니다. 예를 들어

:

<div id="app"> 
    <!-- your HTML code --> 
</div> 

와 JS는 :

var app = new Vue({ 
    el: '#app', // it must be a single root! 
    // ... 
})