Reactividad de arrays en Vue
La reactividad se activa incluso con cambios
en arrays mostrados mediante v-for.
Pongamos como ejemplo que al hacer clic en un botón
se agregue reactivamente un nuevo elemento al array
y los cambios ocurran instantáneamente en la pantalla.
Implementemos lo descrito. Supongamos que tenemos un array:
javascriptdata() {
return {
arr: ['a', 'b', 'c'],
}
}
Mostremos los elementos de este array en un ciclo:
App.vue<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Hagamos un botón que, al hacer clic, agregue un nuevo elemento al array:
App.vue<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Implementemos el método correspondiente:
App.vuemethods: {
add: function() {
this.arr.push('xxx');
}
}
Dado un botón. Dado un array. Muestra los elementos
de este array como una lista ul. Haz
que al hacer clic en el botón se agregue un nuevo elemento
al final de esta lista.
Dado un botón. Dado un array. Muestra los elementos
de este array como una lista ul. Haz
que cada vez que se haga clic en el botón
se elimine el primer elemento de la lista.
Dado un botón. Dado un array. Muestra los elementos
de este array como una lista ul. Haz
que cada vez que se haga clic en el botón
se elimine el último elemento de la lista.
Dado un botón. Dado un array. Muestra los elementos
de este array como una lista ul. Haz
que cada vez que se haga clic en el botón
se elimine el penúltimo elemento de la lista.
Dado un botón. Dado un array. Muestra los elementos
de este array como una lista ul. Haz
que al hacer clic en el botón
los elementos de la lista se ordenen.
Dado un botón. Dado un array. Muestra los elementos
de este array como una lista ul. Haz
que al hacer clic en el botón
los elementos de la lista se muestren
en orden inverso.
Excepciones
Debido a las limitaciones de JavaScript, Vue no es capaz
de detectar los siguientes cambios en un array: la asignación directa
de un elemento por índice: items[clave] = nuevoValor y el cambio explícito de la longitud
del array, por ejemplo: items.length = nuevaLongitud.