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> 

Javascriptを

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の公式マニュアルを参照し、解決策を思い付くことができませんでした。 しばらくグーグルで検索したところ、複数のルート要素をレンダリングすることは不可能であることがわかっていましたが、まだ解決策を考え出すことはできませんでした。

私はこれを解決する方法を提案してください。

ありがとうございます！

Answer 1

Vueでは、1つのルートノードが必要です。しかし、これにあなたの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ディレクティブによって発生し、1つ以上の要素をレンダリングする可能性があります）。また、非常に簡単に解決することができます、あなたのHTMLを別の要素にラップするだけです。例えば

：

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

とJS：

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