Try to reproduce issue #1883

inertiajs · May 30, 2024 · f8f631f · f8f631f
1 parent 683155c
commit f8f631f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/playgrounds/vue3/resources/js/Pages/Users.vue b/playgrounds/vue3/resources/js/Pages/Users.vue
@@ -4,14 +4,28 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3'
+import { Head, router, usePage } from '@inertiajs/vue3'
+import { onMounted } from 'vue'
+
+const page = usePage()
 
 defineProps({ users: Array })
+
+onMounted(() => {
+  router.reload({
+    only: ['users'],
+  })
+})
 </script>
 
 <template>
   <Head title="User" />
+  <button></button>
   <h1 class="text-3xl">Users</h1>
+  <div class="my-4 border p-4">
+    <div><strong>Using $page.props:</strong> {{ $page.props.appName }}</div>
+    <div><strong>Using usePage():</strong> {{ page.props.appName }}</div>
+  </div>
   <div class="mt-6 w-full max-w-2xl overflow-hidden rounded border shadow-sm">
     <table class="w-full text-left">
       <thead>
@@ -22,11 +36,14 @@ defineProps({ users: Array })
         </tr>
       </thead>
       <tbody>
-        <tr v-for="user in users" :key="user.id" class="border-t">
+        <tr v-if="users" v-for="user in users" :key="user.id" class="border-t">
           <td class="px-4 py-2">{{ user.id }}</td>
           <td class="px-4 py-2">{{ user.name }}</td>
           <td class="px-4 py-2">{{ user.email }}</td>
         </tr>
+        <tr v-else="users" class="border-t">
+          <td class="px-4 py-2" colspan="3">Loading...</td>
+        </tr>
       </tbody>
     </table>
   </div>

diff --git a/playgrounds/vue3/routes/web.php b/playgrounds/vue3/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use Inertia\Inertia;
 
 /*
 |--------------------------------------------------------------------------
@@ -19,7 +20,7 @@
 
 Route::get('/users', function () {
     return inertia('Users', [
-        'users' => [
+        'users' => Inertia::lazy(fn () => [
             [
                 'id' => 1,
                 'name' => 'Jonathan Reinink',
@@ -60,7 +61,7 @@
                 'name' => 'Pedro Borges',
                 'email' => 'pedro@example.com',
             ],
-        ],
+        ]),
     ]);
 });