Listado de notas: personalización

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 😄

Si, tienes el error “Failed to resolve component: inertia-link” pudes resolverlo importando el componente manualmente inertiajs/inertia-vue3, debido a una actualización. El Código quedaría así.

HTML

<Link :href=“route(‘notes.show’, note. id)”>
Mostrar
</Link>

JS

<script>
import AppLayout from '@/Layouts/AppLayout.vue’
import { Head, Link } from ‘@inertiajs/inertia-vue3’

export default {
    components: {
        AppLayout,
        Head,
        Link,

    },
    props:{
        notes: Array,
    }
}

</script>

Para los que no les salga en la ultima sección:

export default {
    ...
}

Deben hacer lo siguiente, en la primera sección del codigo, donde está:

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
</script>

.
Le agregan

defineProps({
    notes: Array,
})

.
Quedando de esta manera:

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
defineProps({
    notes: Array,
})
</script>

.
Espero les sirva para continuar con el curso 😁

Les dejo mi commit con Laravel 9 y Vue 3.

https://github.com/jlbousing/platzi-inertia/commit/1ad966961fd410fba9aea55acd6c15a69bbf34c1

En Laravel 9, Jetstream utiliza Vue 3, este curso está hecho con Vue 2, debido a que tiene ya 2 años de antigüedad. Con Inertia y Vue 3 las cosas se hacen un poco diferentes. Por ejemplo para definir los props se hacen de esta manera:

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';

defineProps({
    notes: Array
})
</script>

me encanta ahora la forma de apuntar a una ruta de laravel desde vue, solo con la etiqueta <inertia-link> </inertia-link>

Ahi vamo dandole !!
.
Por ahora ha sido manejable el tema de renderizar .vue-s. No me quiero imaginar una plantilla compleja como un panel de administracion,
.
Positivo que ademas de actualizarnos en laravel con vue, aprendemos tailwind.
.

Con laravel 8 y vue3, el inicio va así

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import {Link} from '@inertiajs/inertia-vue3';
defineProps({notes: Array});
</script>

y el link así

<Link :href="route('notes.show', note.id)">
    Ver
</Link> 

Inicie el proyecto con laravel 8 y los componentes vue ya vienen configurados con composition api, así se definen los props:

const props = defineProps({
        notes : Array,
});