Level 29
Which result do you get in console from this console log?
console.log(props.boards)
Feb 2, 2024
16
Level 1
Inertia Link + V-For Loop not Working. (Update)
Hello! So I would like to update regarding my issue here, it seems I have coded something wrong to revert me to the same error:
This is how my Code is looking:
BoardController:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
class BoardController extends Controller
{
public function index()
{
return Inertia::render('Boards', [
'boards' => auth()->user()->boards
]);
}
public function show()
{
return Inertia::render('Board');
} //
}
Boards.vue
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { PlusIcon } from "@heroicons/vue/20/solid"
import { Head, Link } from '@inertiajs/vue3';
import { ref } from 'vue';
const props = defineProps({
boards: Array,
});
const showingNavigationDropdown = ref(false);
console.log(props.boards)
</script>
<template>
<Head title="Taskboard"/>
<AuthenticatedLayout>
<div class="h-full bg-gray-700 px-4 py-6">
<div class="max-w-5xl mx-auto">
<div class="inline-flex mb-4 div.flex.items-center">
<h3 class="font-black text-lg text-gray-200 py-2">My Boards</h3>
<button class="inline-flex items-center ml-4 py-2 px-3 text-white bg-gray-700 rounded font-bold hover:bg-yellow-600">
<PlusIcon class="-ml-1 h-4 w-4"/>
<span class="ml-1 ">Create Board</span>
</button>
</div>
<ul class="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-4">
<li
v-for="board in boards"
:key="board.id"
class="relative bg-yellow-400 hover:bg-yellow-600 rounded-md min-h-[7rem]">
<Link :href="route('boards.show', {board: board.id})"
class="p-3 text-gray-900 hover:text-gray-900 text-lg font-bold absolute inset-0">
{{ board.name }}
</Link>
</li>
</ul>
</div>
</div>
</AuthenticatedLayout>
</template>
I don't know how it keeps happening and I just want this school project to be finished :(
Level 1
@gych Hello, this is what I'm getting
[[Handler]] : MutableReactiveHandler [[Target]] : Array(0) [[IsRevoked]] : false
Level 29
@likecastillo props.boards contains no values, now you can check on the back end if there actually exist boards for that user
Change your index method like the example below, I've added the dd() - dump and die, this way you can see if a the auth()->user()->boards returns the expected boards or not.
public function index()
{
$boards = auth()->user()->boards;
dd($boards);
return Inertia::render('Boards', [
'boards' => $boards
]);
}
If you check manually do you have boards in the db for that user?
Level 1
checking mysql workbench, i have the seeders working properly
the new code shows this
Illuminate\Database\Eloquent\Collection {#1321 ▼ // app/Http/Controllers/BoardController.php:13
#items: []
#escapeWhenCastingToString: false
}
Level 1
@gych Also to mention I'm using Laravel Sail on this
Level 29
@likecastillo This means that there are no boards found for the user. If you look in the database manually, do you see created boards for that user id?
Level 1
@gych Hello, i'm not sure how to check boards created for the user_id. It only shows 1 per column. But it worked yesterday without changing much of the Database Seeder
<?php
namespace Database\Seeders;
use App\Models\Board;
use App\Models\User;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$user = User::factory()->create(['email' => '[email protected]', 'password' => bcrypt('secret')]);
Board::factory(10)->for($user)->create();
}
}
Level 29
@likecastillo Are you also authenticated with the user that is created in this seeder ([email protected]) ?
Level 1
@gych Hello this is just the email given for the tutorial
Level 29
@likecastillo In your seeder you create the boards for that $user.
In your controller you get the boards from the user that is authenticated/logged in
auth()->user()->boards;
This means that you have to be logged in with the user that is created in the seeder otherwise you won't have any results if you login with another user that has no created boards.
Level 1
@gych I see, that makes sense! Though I'm just thinking how can I log in if I changed the email in the code to mine if it also creates its password.
Level 29
@likecastillo You can set your own password, now it is set to 'secret'
You can change secret to any value you which and that will be your password
bcrypt('yourpassword')
Level 1
@gych Holy, it worked! For real this time! I think this is what the tutorial guy intended. Thank you so much! I've been stuck here for days!
1 like
Level 29
@likecastillo No problem, I'm glad it works now :) Good luck with the rest of your learning journey !
Level 104
...revert me to the same error
But you don't show the error?!?!
Level 1
@tykus It seems it's working but The boards list with the V-For loop is not showing. Thank you
Please or to participate in this conversation.