Open inckmo opened 1 year ago
`
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"
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 }, ) }, )
<div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="p-6 text-gray-900">You're logged in!</div> </div> </div> </div> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="p-6 text-gray-900"> <input v-model="search" type="text" placeholder="Search..." class="block w-full py-2 text-sm pr-5 text-gray-700 bg-white border border-gray-200 rounded-lg md:w-80 placeholder-gray-400/70 pl-11 rtl:pr-11 rtl:pl-5 focus:border-indigo-500 focus:ring-indigo-300 focus:outline-none focus:ring focus:ring-opacity-40" ></div> <div class="p-6 text-gray-900"> <div v-for="user in users.data" :key="user.id"> {{ user.id }}. {{ user.name }} </div> </div> </div> </div> </div> </AuthenticatedLayout>
>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 If I delete the Build Directory inside public Directory and I got error this Resolve component error when I search Error this Resolve Component is not a function, (page not reload or refresh) Build
Build
Searching a user then Full reloading page in Vue Inertia
I Just wonder Its not working can someone have a better solution?
`
https://github.com/inertiajs/inertiajs.com/assets/19841184/94eb1f90-7b73-44d8-81a9-fcef620e71ac
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 }, ) }, )
Dashboard