Renderizado de Listas ​

v-for ​

Podemos usar la directiva v-for para renderizar una lista de elementos basándose en un array. La directiva v-for requiere una sintaxis especial en la forma item in items, donde items es el array de datos fuente y item es un alias para el elemento del array que se está iterando:

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

Dentro del ámbito de v-for, las expresiones de template tienen acceso a todas las propiedades del ámbito padre. Además, v-for también soporta un segundo alias opcional para el índice del elemento actual:

const parentMessage = ref('Padre')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

data() {
  return {
    parentMessage: 'Padre',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

El ámbito de las variables de v-for es similar al siguiente JavaScript:

const parentMessage = 'Padre'
const items = [
  /* ... */
]

items.forEach((item, index) => {
  // tiene acceso al ámbito externo `parentMessage`,
  // pero `item` e `index` solo están disponibles aquí.
  console.log(parentMessage, item.message, index)
})

Observa cómo el valor de v-for coincide con la firma de la función del callback forEach. De hecho, puedes usar la desestructuración en el alias de elemento de v-for de forma similar a la desestructuración de argumentos de función:

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- con alias del índice -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

Para v-for anidados, el ámbito también funciona de forma similar a las funciones anidadas. Cada ámbito de v-for tiene acceso a los ámbitos padre:

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

También puedes usar of como delimitador en lugar de in, para que se acerque más a la sintaxis de JavaScript para iteradores:

<div v-for="item of items"></div>

v-for con un Objeto ​

También puedes usar v-for para iterar a través de las propiedades de un objeto. El orden de iteración se basará en el resultado de llamar a Object.values() sobre el objeto:

const myObject = reactive({
  title: 'Cómo hacer listas en Vue',
  author: 'Jane Doe',
  publishedAt: '10-04-2016'
})

data() {
  return {
    myObject: {
      title: 'Cómo hacer listas en Vue',
      author: 'Jane Doe',
      publishedAt: '10-04-2016'
    }
  }
}

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

También puedes proporcionar un segundo alias para el nombre de la propiedad (también conocido como key):

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

Y otro para el índice:

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

v-for con un Rango ​

v-for también puede tomar un entero. En este caso, repetirá el template esa cantidad de veces, basándose en un rango de 1...n.

<span v-for="n in 10">{{ n }}</span>

Ten en cuenta que aquí n comienza con un valor inicial de 1 en lugar de 0.

v-for en <template> ​

Similar a el template v-if, también puedes usar una etiqueta <template> con v-for para renderizar un bloque de múltiples elementos. Por ejemplo:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-for con v-if ​

Cuando existen en el mismo nodo, v-if tiene una prioridad más alta que v-for. Esto significa que la condición v-if no tendrá acceso a las variables del ámbito de v-for:

<!--
Esto generará un error porque la propiedad "todo"
no está definida en la instancia.
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

Esto se puede solucionar moviendo v-for a una etiqueta <template> de envoltura (lo cual también es más explícito):

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

Mantener el Estado con key ​

Cuando Vue está actualizando una lista de elementos renderizados con v-for, por defecto utiliza una estrategia de "parcheo in situ". Si el orden de los elementos de datos ha cambiado, en lugar de mover los elementos del DOM para que coincidan con el orden de los elementos, Vue parcheará cada elemento in situ y se asegurará de que refleje lo que debería renderizarse en ese índice particular.

Este modo predeterminado es eficiente, pero solo es adecuado cuando la salida del renderizado de tu lista no depende del estado del componente hijo o del estado temporal del DOM (por ejemplo, valores de entrada de formularios).

Para darle una pista a Vue y que pueda rastrear la identidad de cada nodo, y así reutilizar y reordenar los elementos existentes, debes proporcionar un atributo key único para cada elemento:

<div v-for="item in items" :key="item.id">
  <!-- contenido -->
</div>

Cuando se usa <template v-for>, la key debe colocarse en el contenedor <template>:

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

Se recomienda proporcionar un atributo key con v-for siempre que sea posible, a menos que el contenido del DOM iterado sea simple (es decir, no contenga componentes o elementos del DOM con estado), o si dependes intencionalmente del comportamiento predeterminado para obtener mejoras de rendimiento.

La vinculación de key espera valores primitivos, es decir, cadenas y números. No uses objetos como v-for keys. Para un uso detallado del atributo key, consulta la documentación de la API de key.

v-for con un Componente ​

Esta sección asume conocimientos de Componentes. No dudes en omitirla y volver más tarde.

Puedes usar directamente v-for en un componente, como cualquier elemento normal (no olvides proporcionar una key):

<MyComponent v-for="item in items" :key="item.id" />

Sin embargo, esto no pasará automáticamente ningún dato al componente, porque los componentes tienen ámbitos aislados propios. Para pasar los datos iterados al componente, también deberíamos usar props:

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

La razón para no inyectar automáticamente item en el componente es porque eso hace que el componente esté fuertemente acoplado a cómo funciona v-for. Ser explícito sobre el origen de sus datos hace que el componente sea reutilizable en otras situaciones.

Detección de Cambios en Arrays ​

Métodos de Mutación ​

Vue es capaz de detectar cuándo se llaman los métodos de mutación de un array reactive y disparar las actualizaciones necesarias. Estos métodos de mutación son:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Reemplazando un Array ​

Los métodos de mutación, como su nombre indica, mutan el array original sobre el que se llaman. En comparación, también existen métodos no mutables, por ejemplo, filter(), concat() y slice(), que no mutan el array original pero siempre devuelven un nuevo array. Al trabajar con métodos no mutables, debemos reemplazar el array antiguo con el nuevo:

// `items` es una referencia con valor de array
items.value = items.value.filter((item) => item.message.match(/Foo/))

this.items = this.items.filter((item) => item.message.match(/Foo/))

Podrías pensar que esto hará que Vue descarte el DOM existente y vuelva a renderizar toda la lista - afortunadamente, no es así. Vue implementa algunas heurísticas inteligentes para maximizar la reutilización de elementos del DOM, por lo que reemplazar un array con otro array que contenga objetos superpuestos es una operación muy eficiente.

Mostrar Resultados Filtrados/Ordenados ​

A veces queremos mostrar una versión filtrada o ordenada de un array sin mutar o restablecer los datos originales. En este caso, puedes crear una propiedad computada que devuelva el array filtrado o ordenado.

Por ejemplo:

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})

data() {
  return {
    numbers: [1, 2, 3, 4, 5]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}

<li v-for="n in evenNumbers">{{ n }}</li>

En situaciones donde las propiedades computedas no son factibles (por ejemplo, dentro de bucles v-for anidados), puedes usar un método:

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

¡Ten cuidado con reverse() y sort() en una propiedad computada! Estos dos métodos mutarán el array original, lo cual debe evitarse en los getters computados. Crea una copia del array original antes de llamar a estos métodos:

- return numbers.reverse()
+ return [...numbers].reverse()