A way to render multiple root elements on VueJS with v-for directive

Question

Right now, I'm trying to make a website that shows recent news posts which is supplied my NodeJS API.

I've tried the following:

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!'},
        ]
    }
})

Apparently, the above didn't work because Vue can't render multiple root elements.

I've looked up the VueJS's official manual and couldn't come up with a solution. After googling a while, I've understood that it was impossible to render multiple root element, however, I yet to have been able to come up with a solution.

Answer 1

Vue requires that there be a single root node. However, try changing your html to this:

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

This change allows for a single root node id="news" and yet still allows for rendering the lists of recent posts.

Answer 2

You can have multiple root elements (or components) using render functions

A simple example is having a component which renders multiple <li> elements:

<template>
 <li>Item</li>
 <li>Item2</li>
 ... etc
</template>

However the above will throw an error. To solve this error the above template can be converted to:

export default {
 functional: true,
 render(createElement) {
  return [
    createElement('li', 'Item'),
    createElement('li', 'Item2)
  ]
 }
}

But again as you probably noticed this can get very tedious if for example you want to display 50 li items. So, eventually, to dynamically display elements you can do:

export default {
 functional: true,
 props: ['listItems'], //this is an array of `<li>` names (e.g. ['Item', 'Item2'])

 render(createElement, { props }) {
   return props.listItems.map(name => {
     return createElement('li', name)
   })
 }
}

INFO in those examples i have used the property functional: true but it is not required of course to use "render functions". Please consider learning more about functional componentshere

Answer 3

Multiple root elements are not supported by Vue (which caused by your v-for directive, beacause it may render more than 1 elements). And is also very simple to solve, just wrap your HTML into another Element will do.

For example:

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

and the js:

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