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>
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>