Listado de notas: personalización

Proyecto

Carlos Eduardo Gomez García

Estudiante

Si a ustedes les sale un "error" dentro del editor de código que les marca en el v-for (así como al profesor) es porque Vue te pide que a cada elemento v-for le agregues un identificador, no es necesario, pero es de buena práctica hacerlo porque así Vue puede diferenciar a un elemento de otro, y por eso el linter del editor te pide que lo agregues, y de hecho, si trabajaras únicamente con Vue sí te daría un error al compilar el componente. . La forma de solucionarlo es agregando un :key al v-for, podemos usar un key genérico:

<tr v-for="(note, i) in notes" :key="i">
...
</tr>

Así Vue generará un contador que puedes usar como llaves, pero una forma más profesional es que, ya que en este caso sí tenemos un id por cada nota, podemos usarlo:

<tr v-for="note in notes" :key="note.id">
...
</tr>

De esa forma es más práctico y eliminas el error del editor :D

Brian Sánchez Izquierdo

Estudiante

Hace 6 años

excelente aporte, como los famosos Id's de react en los componentes de una lista.

Marcos Aguirre Miñarro

Estudiante

Hace 5 años

Como se nota ese gran curso de introducción a Vue 2 !!! yo lo he hecho hace poco para poder seguir este curso de una mejor forma y la verdad no me arrepiento.

Listado de notas: personalización

Introducción

Cómo aprenderás a crear SPAs en Laravel

Introducción a Jetstream

Proyecto

Conoce qué SPA vas a construir

Configuración inicial

Sistema basado en componentes

Jetstream: configuración inicial

Jetstream: personalización

Listado de notas: configuración inicial

Listado de notas: personalización

Vista detalle de nota

Formulario de editar

Código de actualizar

Formulario de crear

Código de guardar

Función de eliminar

Flash message

Buscador

Conclusión

Repaso final

Despedida

Clase bonus: nunca parar de aprender