Tengo datos que me gustaría presentar en un CSS Grid. El resultado final debe ser
<div>hello 1</div><div>hello 2</div> <div>bonjour 1</div><div>bonjour 2</div>
Imagino la creación de la cuadrícula a través de v-for
, iterando sobre los datos que recibo de algún lugar (en el ejemplo a continuación, está representado por el Array ['hello', 'bonjour']
). Mi problema es que la iteración crea un <div>
adicional que encierra los dos elementos que me interesan:
<div v-for="for word in ['hello', 'bonjour']"> <div>{{word}} 1</div><div>{{word}} 2</div> </div>
El resultado es
<div><div>hello 1</div><div>hello 2</div></div> <div><div>bonjour 1</div><div>bonjour 2</div></div>
¿Hay alguna manera de iterar sobre un iterador sin crear un elemento adicional?
En pseudocódigo esto sería algo como
<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>
Puedes envolver en una 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>