Level 29
Where is the data for boards coming from? I can't see it defined in your script setup.
1 like
Feb 1, 2024
15
Level 1
Inertia Link + V-For Loop not Working.
Hello! I'm not a coder here (This is for a mandatory school project) and English is not my first language. But I would appreciate for some help regarding the issue in my code. I'm following Tallpad's tutorial on Creating a Kanban Board and I'm stuck on creating the Boards List
Mainly on generating the boards as seen at 12:07. I managed to create the static example, but converting it by adding code to them makes it disappear.
I would very much want to use my boards table for rendering lists using v-for and having them hyperlinked by Inertia's Link function. Since InertiaLink isn't working, I had it set to only link. This is the code for the list.
<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" href="#">
{{ board.name }}
</Link>
</li>
</ul>
I have these at the start of the code of the AuthenticatedLayout:
<script setup>
import { ref } from 'vue';
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import NavLink from '@/Components/NavLink.vue';
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
import { Link } from '@inertiajs/vue3';
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
const showingNavigationDropdown = ref(false);
</script>
The blocks just disappear. and I cant seem to find any solution to this. I really hope to be enlightened in this situation. Thank you! Let me know if I need to provide more details.
The Link functionality works on my AuthenticatedLayout.vue file, so I'm guessing it's more of the V-For? But the tables are running fine. I'm using Sail/Docker with the Latest version of Laravel + Laravel Breeze.
Thank you so much!
Level 1
@gych Hello! I have it coming from a mysql database of the same name that I have run migrations on.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('boards', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->foreignId('user_id')->constrained()->onDelete('cascade');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('boards');
}
};
Level 29
@likecastillo Ok but you still have to send the boards data to the vue template / page you use.
Can you share the code of your controller where you render the template?
Level 1
@gych This is what I have on my 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');
} //
}
Level 29
@likecastillo Ok this seems good for the index method, if your relation between boards and users is setup correctly.
Now try to define the boards property in your script setup by adding
defineProps(['boards']);
Like this
<script setup>
import { ref } from 'vue';
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import NavLink from '@/Components/NavLink.vue';
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
import { Link } from '@inertiajs/vue3';
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
defineProps(['boards']);
const showingNavigationDropdown = ref(false);
</script>
Is this giving you better results?
Level 1
@gych Hello! It gives out the same result of using InertiaLink, it's only showing a white screen! This was my first encounter.
Also, I stand corrected, this is what my boards.vue look like in full (the one i pasted back is for the authenticated layout)
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { PlusIcon } from "@heroicons/vue/20/solid"
import { Head, Link } from '@inertiajs/vue3';
const props = defineProps({
boards: Array,
});
</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>
Level 29
@likecastillo when you have a white page check the browser console for errors, propably there will be an error that triggered, in that console you can get more info about it. That will give us more info.
Level 1
@gych Thank you. I have corrected it and the console has shown that it's a runtime error (Ref is not defined). So I imported ref from 'Vue'. The screen now shows normally but still without the boards.
Unchecked runtime.lastError: The message port closed before a response was received, is the new error. Others have said that this error is due to my extensions, so i tried incognito + other browsers. They're not showing any errors in the console, but the boards are still not there.
Level 29
@likecastillo You can ignore this error (Unchecked runtime.lastError) a lot of people have it and it will not break your code its related to something else, not your code.
Level 29
Also try to log the boards prop to see if it contains the data you expect by using console.log(props.boards)
const props = defineProps({
boards: Array,
});
console.log(props.boards)
Level 1
@gych Hello again. I tried this and this is what's shown.
Proxy(Array) [[Handler]] : MutableReactiveHandler [[Target]] : Array(0) [[IsRevoked]] : false
P.S. I used seeders to fill out the tables for examples
Level 1
Thank you very much for your help @gych . You have helped now fix the problem, I had refreshed my migrations given the new additions to my code. and it is now showing as it is. I'm very much grateful and I hope you have a great day!!!!
1 like
Level 29
@likecastillo I'm glad its working now, you too have a nice day!
Level 1
@gych Hello! I would like to ask for help again as the problem has shown again :( The boards disappeared and I don't know what I did wrong.
Level 29
@likecastillo Hey, You can close this thread I'm replying on the new updated thread you've created
1 like
Please or to participate in this conversation.