Listado de notas: personalización

Clase 9 de 20 • Curso de Single Page Applications en Laravel con Inertia y Vue.js

Comentarios

Carlos Eduardo Gomez García

teacher•

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

student•

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

Marcos Aguirre Miñarro

student•

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.

Christopher Mejia

student•

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>

<script>

import AppLayout from '@/Layouts/AppLayout.vue'

import { Head, Link } from '@inertiajs/inertia-vue3'

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

    },
    props:{
        notes: Array,
    }
}

</script>

José Reinaldo Duque Serna

student•

Excelente!! Me fue de gran ayuda este aporte.

Andrés Felipe Lopez gomez

student•

Excelente muchas gracias

Leonardo Galindo

student•

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 😁

Leandro Nobles

student•

excelente aporte

Jorge Bou-saad

student•

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>

Diego Dominguez

student•

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>

Daniel Andres Zarate Giraldo Andres Zarate

student•

Gracias amigo, estoy llevando el curso en laravel 9

Jose Orlando Parra Soto

student•

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

Kenneth Angulo L

student•

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. .

Remberto Alvaro Molina Colodro

student•

Creo que deberian darle una actualizacion a este curso, porque hay cosas que cambiaron

Anyami Cornieles

student•

Así me ha quedado el código con vue3

<script setup>
    import AppLayout from '@/Layouts/AppLayout.vue';
    import { Link } from '@inertiajs/vue3';

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

<template>
    <AppLayout title="Notes">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Notas
            </h3>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <div class="p3-4 sm:px0">
                            <h3 class="text-lg text-gray-900">Listado de Notas</h4>
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-5 md:mt-0">
                        <div class="shadow bg-white md:rounded-md p-4">
                            <table>
                                <tr v-for="(note,i) in notes" :key="i">
                                    <td class="border px-4 py-2">
                                        {{ notes.excerpt }}
                                    </td>
                                    <td class="px-4 py-2">
                                        <Link :href="route('notes.show',note.id)">
                                            Ver
                                        </Link>
                                    </td>
                                    <td class="px-4 py-2">
                                        <Link :href="route('notes.show',note.id)">
                                            Editar
                                        </Link>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

Anyami Cornieles

student•

Lo dejo separado:

<script setup>
    import AppLayout from '@/Layouts/AppLayout.vue';
    import { Link } from '@inertiajs/vue3';

    defineProps({
        distributors: Array,
    })
</script>

Francisco Javier Cervantes Candelario

student•

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,
});

<script setup>
    import AppLayout from '@/Layouts/AppLayout.vue';
    import { Link } from '@inertiajs/vue3';

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

<template>
    <AppLayout title="Notes">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Notas
            </h3>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <div class="p3-4 sm:px0">
                            <h3 class="text-lg text-gray-900">Listado de Notas</h4>
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-5 md:mt-0">
                        <div class="shadow bg-white md:rounded-md p-4">
                            <table>
                                <tr v-for="(note,i) in notes" :key="i">
                                    <td class="border px-4 py-2">
                                        {{ notes.excerpt }}
                                    </td>
                                    <td class="px-4 py-2">
                                        <Link :href="route('notes.show',note.id)">
                                            Ver
                                        </Link>
                                    </td>
                                    <td class="px-4 py-2">
                                        <Link :href="route('notes.show',note.id)">
                                            Editar
                                        </Link>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

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