No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Vista detalle de nota

10/20
Recursos

Aportes 9

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Para la versi贸n con vue3 fue necesario usar los link de la siguiente manera:

Uhhh eso me falt贸 mencionarlo, todo lo que est谩 en Vue es c贸digo JavaSript, es por eso que accedemos a trav茅s de un 鈥.鈥 en lugar de una flechita de PHP.
.
Lo genial es que aqu铆 podemos empezar a usar propiedades computadas, m茅todos y dem谩s 馃憖
.
La forma en la que yo creo que trabaja es que realmente no estamos usando el sistema de rutas de Laravel, es decir, se usa ese sistema de rutas 煤nicamente cuando accedemos por primera vez al sitio web, donde Laravel tiene que decidir cu谩l ruta mostrar, pero ya despu茅s de eso, Laravel le pasa su sistema de rutas a Vue a trav茅s de la librer铆a tightengo/ziggy y es el sistema de rutas de Vue el que se encarga de ir mostrando las dem谩s rutas, en Vue normal, un enlace se llamar铆a <route-link> jaja, de hecho s铆 podemos usar un elemento <a>, pero estar铆amos desaprovechando a Vue porque un elemento <a> recargar铆a la p谩gina.

Como bien menciona Nelson, a principios del 2021 se removieron los componentes <inertia-link> e <inertia-head>, tal como lo explican en su sitio web:
https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13

Adicional a la soluci贸n propuesta por Nelson, tambi茅n se pueden registrar de manera global en app.js para evitar importarlos en cada archivo.vue.

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

createInertiaApp({
  // ...
  setup({ el, App, props, plugin }) {
    createApp({
      render: () => h(App, props),
    })
      .use(plugin)
      .component('InertiaHead', Head)
      .component('InertiaLink', Link)
      .mount(el)
  },
})

En mi caso, yo 煤nicamente agregu茅 al app.js el import nuevo que se indica ac谩
inertia vue3

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { Head, Link } from '@inertiajs/inertia-vue3'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

mantuve los tags de :

 <inertia-link :href="route('notes.edit', note.id)">   Editar  </inertia-link>

Este es el c贸digo del archivo de Vue

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                M贸dulo de Notas
            </h2>
        </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">Detalle de una nota</h3>
                            <p class="text-sm text-gray-600">{{ note.excerpt }}</p>
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-5 md:mt-0">
                        <div class="shadow bg-white md:roundend-md p-4">
                            <p>{{ note.content }}</p>
                            <hr class="my-6">
                            <inertia-link :href="route('notes.index')">
                                Volver
                            </inertia-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import Welcome from '@/Jetstream/Welcome'

    export default {
        components: {
            AppLayout,
            Welcome,
        },
        props: {
            note: Object
        }
    }
</script>

Me ha gustado la forma en que ayuda Inertia, trabajamos con Vue sin tener que crear APIs.

En laravel 8 y vue 3 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> 

Tengan cuidado con las clases, escrib铆 mal algunas y directamente no me cargaba la p谩gina, tuve que copiar un c贸digo que dejaron en comentarios

compa帽eros, alguno sabe de un ejemplo si son varias tablas y estan relacionadas,