Una introducción a la representación de listas en Vue

Una de las tareas más comunes en el desarrollo web es generar listas de datos. Vue maneja esto con la ayuda del v-para directiva. Explorará qué es la directiva v-for, cómo eliminar elementos de una lista y cómo representar listas con claves.

¿Qué es la directiva v-for en Vue?

El v-para La directiva es una de las directivas de Vue que le permite generar listas con un código JavaScript mínimo. El v-para La directiva funciona de manera similar a la directiva for bucle en JavaScript y puede iterar sobre matrices y objetos para representar elementos en una lista.

para utilizar el v-para directiva, proporcione una matriz sobre la que desee iterar en el datos propiedad de la Objeto de opciones en Vue.

Por ejemplo:

<plantilla>
<ul>
<liv-para="nombre en nombres">{{ nombre }}li>
ul>
plantilla>
<guion>
exportación predeterminada {
 datos() {
 devolver {
 nombres: ['Juan', 'Doe', 'James'],
 };
 },
};
guion>

El bloque de código anterior muestra un ejemplo de una aplicación Vue que utiliza el

v-para directiva para iterar sobre el nombres matriz que se proporciona en el datos propiedad.

v-para tiene un valor establecido en una expresión con dos partes: la variable de iteración (nombre) y el nombres formación v-para puntos a. La variable de iteración contiene cada nombre en el nombres matriz y muestra la nombre.

Vue crea un nuevo Modelo de objeto de documento (DOM) elemento para cada nombre en el nombres array y lo representa en la página web.

Si el nombres cambia la matriz (por ejemplo, se agrega un nuevo nombre o se elimina uno antiguo), Vue actualizará automáticamente el DOM virtual y volverá a representar la lista para reflejar los datos actualizados.

Vue también ofrece una forma de obtener el índice de un elemento en una lista.

<liv-para="(nombre, índice) en nombres">{{ nombre }} -- {{ índice }}li>

El código anterior muestra la sintaxis para mostrar el índice de cada nombre en el nombres formación.

También puede utilizar el v-para directiva para recorrer un rango de números:

<liv-para="número en 10">Vue es agradableli>

El código anterior generará una lista con el texto Vue es agradable diez veces. El v-para La directiva también puede recorrer un rango de números para mostrar datos repetidamente o realizar una operación. En este caso, el número La variable de iteración se utiliza para acceder al elemento actual de la lista.

Cómo eliminar elementos de una lista en Vue

Puede permitir que los usuarios eliminen elementos de las listas en su aplicación web. Esta función es útil cuando se crean aplicaciones como una lista de tareas pendientes.

Puedes usar el empalme método JavaScript (esa es una de las formas de eliminando elementos de arreglos) para eliminar un elemento de una lista en Vue.

array.splice (startIndex, numToRemove, newElements)

El método de empalme puede agregar o eliminar elementos de una matriz. El método de empalme toma los parámetros en el siguiente orden:

1. El Índice de comienzo El parámetro establece el índice en el que comenzar a modificar la matriz.
2. numToRemove indica el número de elementos que desea eliminar de la matriz.
3. Finalmente, el elementos nuevos parámetro, que puede usar para agregar elementos a la matriz. Si no se especifica ningún elemento, empalme() solo eliminará elementos de la matriz.

Para usar el método de empalme para eliminar un elemento de una lista en Vue, debe conocer el índice de ese elemento. Una forma de lograr esto es pasar el índice como argumento para un método que maneja la eliminación del elemento.

Por ejemplo, puede agregar un botón junto a cada nombre en la matriz que activa un método para eliminar el elemento cuando un usuario hace clic en él:

<plantilla>
<ul>
<liv-para="(nombre, índice) en nombres">
 {{ nombre }} -- {{ índice }}
<botón @hacer clic="removeItem (índice)">Eliminarbotón>
li>
ul>
plantilla>

El índice parámetro nos da acceso al índice de cada nombre en la matriz, que este programa pasa como argumento al remover el artículo método. El remover el artículo El método puede entonces usar el empalme método para eliminar un nombre desde el nombres formación:

<guion>
exportación predeterminada {
 datos() {
 devolver {
 nombres: ['Juan', 'Doe', 'James'],
 };
 },
 métodos: {
 removeItem (índice) {
 this.names.splice (índice, 1);
 }
}
};
guion>

El script anterior utiliza el empalme método para eliminar un nombre de la lista de nombres representados. Esto actualizará automáticamente la lista en la interfaz de usuario para reflejar la matriz actualizada.

Cómo renderizar listas con claves en Vue

El llave atributo es un atributo único que Vue usa para rastrear la identidad de cada elemento en la lista. Cuando cambia un elemento de la lista, con la ayuda del llave El atributo Vue puede actualizar rápidamente el DOM sin volver a renderizar la lista completa.

Echemos un vistazo a un ejemplo de representación de una lista con claves en Vue:

<plantilla>
<división>
<ul>
<liv-para="nombre en nombres":llave="nombre.id">
 {{ nombre nombre }}
<botón @hacer clic="removeItem (nombre.id)">Eliminarbotón>
li>
ul>
división>
plantilla>
<guion>
exportación predeterminada {
 datos() {
 devolver {
 nombres: [
 {id: 1, nombre: "Juan"},
 {id: 2, nombre: "Doe"},
 {id: 3, nombre: "James"},
 ],
 };
 },
 métodos: {
 removeItem (clave) {
 this.names.splice (clave - 1, 1);
 },
 },
};
guion>

En este ejemplo, tiene una lista de artículos con características únicas. identificación propiedades. El bloque de código utiliza el llave atributo con el v-para directiva para rastrear la identidad de cada elemento en la lista. Esto permite que Vue actualice de manera eficiente el DOM cuando cambia la lista.

Si eliminara un elemento de la lista, Vue actualizaría el DOM sin tener que volver a procesar la lista completa. Esto se debe a que Vue mantiene la identidad de cada elemento de la lista y puede actualizar solo los elementos que han cambiado.

El llave El atributo debe ser un identificador único para cada elemento de la lista. Esto puede ser un identificación propiedad o cualquier otro identificador único que pueda usarse para rastrear el artículo.

Utilizando el llave atributo con el v-para directiva ayuda a evitar problemas de representación. Por ejemplo, al eliminar los nombres, Vue usa el llave atributo para mantener el orden de los elementos en la lista.

Las directivas de Vue son esenciales

Aquí, cubrió los conceptos básicos de la representación de listas en Vue, incluida la eliminación de elementos de las listas y la representación de listas con claves. Puede crear interfaces receptivas que manejen listas de datos complejas al comprender estos conceptos.

Vue tiene una gran cantidad de directivas para diferentes propósitos, incluida la representación condicional, el enlace de eventos y el enlace de datos. Comprender estas directivas puede ayudarlo a crear aplicaciones web interactivas eficientes.