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

Answer 1

The simplest way I've found of adding multiple root elements is to add a single

wrapper element and make it disappear with some CSS magic for the purposes of rendering.

For this we can use the "display: contents" CSS property. The effect is that it makes the container disappear, making the child elements children of the element the next level up in the DOM.

Therefore, in your Vue component template you can have something like this:

I can now use my component without the browser messing up formatting because the wrapping

root element will be ignored by the browser for display purposes:

Note however, that although this should work in most browsers, you may want to check here to make sure it can handle your target browser.

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...