En Vue.js, ¿cómo iteras sobre un arreglo de elementos en una plantilla?

Uso de la Directiva 'v-for' en Vue.js

En Vue.js, la forma correcta de iterar sobre un arreglo de elementos en una plantilla es utilizando la directiva v-for. La directiva v-for permite renderizar una lista de elementos basándose en un arreglo o en un objeto que se proporciona.

Su uso básico se hace siguiendo la sintaxis v-for="elemento in arreglo", donde "elemento" representa el nombre que queramos asignar al valor de cada iteración en nuestra plantilla y "arreglo" es el nombre del arreglo que queremos iterar.

Por ejemplo, si tenemos el siguiente arreglo de onsolas:

new Vue({
  el: '#app',
  data: {
    consoles: ['PlayStation', 'Xbox', 'Nintendo Switch']
  }
})

Podemos iterar sobre este arreglo en nuestra plantilla utilizando la directiva v-for de la siguiente manera:

<div id="app">
  <div v-for="console in consoles" :key="console">
    {{ console }}
  </div>
</div>

Esta plantilla rendereará un nuevo \ div para cada uno de los elementos de nuestro arreglo "consoles", mostrando sus respectivos nombres.

Es importante mencionar que cuando utilizamos v-for con un componente, es requisito proporcionar un :key único para cada iteración. Esto permite a Vue poder mantener el seguimiento de cada nodo en un modo eficiente y potencialmente reusar y reordenar los elementos existentes.

No obstante, aunque es posible iterar sobre un arreglo de elementos en una plantilla usando la directiva v-for, es una buena práctica mantener nuestra plantilla sencilla y poner la lógica compleja, incluyendo las iteraciones, en los métodos o en el código JavaScript del Vue Instance o Vue Component para mantener el código organizado y fácil de leer y mantener.