inertiajs / inertiajs.com

Official Inertia.js website.
https://inertiajs.com
147 stars 115 forks source link

Need Help - Searching for a user then full page reloading, not feel like SPA @latest Breeze Scaffold #308

Open inckmo opened 1 year ago

inckmo commented 1 year ago

Searching a user then Full reloading page in Vue Inertia

I Just wonder Its not working can someone have a better solution?

`

Laravel v10.18.0 Node v20.5.0 & NPM 9.8.1

https://github.com/inertiajs/inertiajs.com/assets/19841184/94eb1f90-7b73-44d8-81a9-fcef620e71ac

Dashboard.vue


<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import {Head} from '@inertiajs/vue3';
import {ref, watch} from "vue";
import {Inertia} from "@inertiajs/inertia"

const props = defineProps({ users: { type: Object, default: () => ({}), }, filters: { type: Object, } })

let search = ref(props.filters.search);

watch(search, value => { Inertia.get( '/dashboard', {search: value}, { preserveState: true, preserveScroll: true, replace: true }, ) }, )

>DashboardController.php
```php
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Inertia\Inertia;

class DashboardController extends Controller
{
    public function __invoke(Request $request): \Inertia\Response
    {
        $name = $request->string('search');

        return Inertia::render('Dashboard', [
            'users' => User::query()
                ->when($name, function ($query, $name) {
                    $query->where('name', 'like', "%{$name}%");
                })
                ->paginate(10)
                ->withQueryString()
                ->through(fn ($user) => [
                    'id' => $user->id,
                    'name' => $user->name,
                ]),
            'filters' => $request->only(['search']),
        ]);
    }
}

Screenshot

Controller

If I delete the Build Directory inside public Directory and I got error this Resolve component error when I search

build

Error this Resolve Component is not a function, (page not reload or refresh)

dashboardcopy Build resolvecomponent