How to v-for without creating a DOM entry? [duplicate]

Question

I have data I would like to present in a CSS Grid. The end result should be

<div>hello 1</div><div>hello 2</div>
<div>bonjour 1</div><div>bonjour 2</div>

I envision the creation of the grid through a v-for, iterating over data I receive from somewhere (in the example below, it is represented by the Array ['hello', 'bonjour']). My problem is that the iteration creates an extra <div> enclosing the two elements I am interested in:

<div v-for="for word in ['hello', 'bonjour']">
<div>{{word}} 1</div><div>{{word}} 2</div>
</div>

The result is

<div><div>hello 1</div><div>hello 2</div></div>
<div><div>bonjour 1</div><div>bonjour 2</div></div>

Is there a way to iterate over an iterator without creating an extra element?

In pseudocode this would be something like

<this-element-is-not-added-to-the-DOM-but-just-manages-the-word-variable v-for="for word in ['hello', 'bonjour']">
<div>{{word}} 1</div><div>{{word}} 2</div>
</this-element-is-not-added-to-the-DOM-but-just-manages-the-word-variable>

Answer 1

You can wrap in a template:

new Vue({ el: "#app" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="word in ['hello', 'bonjour']">
    <div>{{word}} 1</div><div>{{word}} 2</div>
  </template>
</div>