I have created a Livewire component in Jetstream and I have set it as a full-page component in the web.php route page as follows:
use App\Http\Livewire\PostComponent;
...
Route::get('posts/',PostComponent::class)->name('posts');
The post-component.blade.php file has originally the following code:
<div>
<h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
</div>
If I hit the URL .../posts I get the following error:
Undefined variable: header (View:
/home/vagrant/laravelapp/resources/views/layouts/app.blade.php)
So I have tried adding the slot in the post-component.blade.php file:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div>
<h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
</div>
</x-app-layout>
Nevertheless, I get that same error.
What am I missing? How do I fix this?
I hope this is a Jetstream project. By default, livewire will use the app.blade.php as the layout. And the component will get rendered in the slot of the app.blade.php.
But since it's a Jetstream project, it has a slot for the header in the layout file.
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
So to resolve this error, there are two approaches.
give the header as the variable for the layout as below in your PostComponent.php
public function render()
{
return view('livewire.post-component')
->layout('layouts.app', ['header' => 'Post Compoent Page']);
}
Create your own layout and only have a slot. (imagine mylayout.blade.php)
<head>
#livewireStyles
</head>
<body>
{{ $slot }}
#livewireScripts
</body>
and use that layout when rendering the livewire component
public function render()
{
return view('livewire.post-component')->layout('layouts.mylayout');
}
There is a github issue regarding this topic (a closed one). But keep an eye on it. since Jetstream is in it's early stages.
Related
Assuming I want o make a new Blade Component called multi-step-form. I want the component to be able to have as many as possible forms slots. How do I achieve this.
I tried this: But it didn't work:
<!--resources/views/multi-step-form.blade.php -->
<div>
#foreach($forms as $form)
<div class="form"> {{ $form }} </div>
#endforeach
<x-next-button> <x-prev-button>
</div>
And in the child:
<x-multi-step-form>
<x-slot name="forms" {{ -- or "forms[], none of them work --}}>
<!-- Some form --->
<x-slot name="forms">
<x-slot name="forms" >
<!-- Some form --->
<x-slot name="forms">
<x-slot name="forms">
<!-- Some form --->
<x-slot name="forms">
</x-multi-step-form>
Am I missing something here?
this is not possible using blade, you can do something like this in vuejs but unfortunately for now it is not possible in laravel blade.
my suggestion would be to make a child component for this component instead of a slot so it would be reusable as much as you want.
I working on an app and using Laravel Breeze Vue for the first time. Just some quick background, Laravel Breeze provides some quick scaffolding for authentication. When a user logs in, they are presented with a simple dashboard page. I have added a new link to this page as per below.
app/resources/js/Layouts/Authenticated.vue
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<BreezeNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</BreezeNavLink>
<BreezeNavLink :href="route('client.index')" :active="route().current('client.index')">
Clients
</BreezeNavLink>
</div>
I have also created an Index.vue file at file path app/resources/js/Pages/Client/Index.vue. It looks like below:
<template>
<Head title="Clients" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Clients
</h2>
</template>
<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 bg-white border-b border-gray-200">
You're logged in!
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script>
import BreezeAuthenticatedLayout from '#/Layouts/Authenticated.vue'
import { Head } from '#inertiajs/inertia-vue3';
export default {
components: {
BreezeAuthenticatedLayout,
Head,
},
}
</script>
I am using a route resource in my web.php file as per below. I have confirmed that client.index is an existing route via php artisan route:list.
//client routing
Route::middleware(['auth', 'verified'])->group(function() {
Route::resource('client', ClientController::class);
});
I am facing two problems. The first problem is that the link will not render in my navigation links. The second issue is that the Index.vue page will not render as well. I have tried doing npm run dev, npm run watch and clearing caches. None of these have worked. Please provide me with some insight on how to address these issues.
This is closed. I'm using old hardware and it was taking time to pick up the changes. npm run dev performed as expected.
In Vue3, inline-templates were depreciated and now slots are used. Is it possible to have 2-way binding of variables for Vuejs components written in blade templates?
I want to have 2-way binding for Vue components that's written inline with blade templates. Although I know I can pass data like <example-component name="Hello World"> It is a ton of work to add props everywhere.
Vue recommends using slots as a inline-template replacement since it got removed in v3, however, that documentation makes no sense. I've got the components displayed using the code below. It's a dead simple text field + paragraph to display the name.
home.blade.php (Removed unnecessary HTML for brevity)
<div>
<h1>Dashboard</h1>
<example-component>
<div class="container">
<input v-model="name" placeholder="Change Name"/>
<p> Name is #{{ name }} </p>
</div>
</example-component>
</div>
example-component.vue
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
name: 'hi',
}
}
}
</script>
Unfortunately, this does not work, the name doesn't start as 'hi' and doesn't update when changing the textfield. When I try something like <slot :name=name></slot>. Which I believe would pass the name into the slots section, the component gets rendered for a second before disappearing.
Is having 2-way binding with vue variables in blade templates even possible? Any help is appreciated.
Vue: 3.0.5
Laravel: 8.29.0
Is there a reason you're storing the data in the child component? The reactivity design works by passing props down and emitting events up, even though (unfortunately) the reactivity is not maintained when passing a variable up to the parent component. Seems a little counter intuitive, but I might be missing something in what you're trying to create.
It will, however, work if you put the data into the app instead of the component.
// app
const app = Vue.createApp({
data() {
return {
name: 'hi',
}
}
})
// component
app.component('example-component', {
template: `
<div>
<slot></slot>
</div>`,
})
app.mount("#app");
<script src="https://unpkg.com/vue#3.0.5/dist/vue.global.prod.js"></script>
<div id="app">
<h1>Dashboard</h1>
<example-component>
<div class="container">
<input v-model="name" placeholder="Change Name"/>
<p> Name is #{{ name }} </p>
</div>
</example-component>
</div>
<!--
Firstly I'm Laravel Spark and have successfully integrated into the mix installation so my js is being deployed into app.js already
I am getting errors when I setup a new component for a project;
blade file
#extends('spark::layouts.app')
#section('content')
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Sprints</div>
<div class="panel-body">
<os-sprints></os-sprints>
<input type="text" v-model="newSprint">
<button #click="addSprint">add</button>
</div>
</div>
</div>
</div>
</div>
<template id="my-sprints">
<ul class="list-group">
<li class="list-group-item" v-for="sprint in sprintlist">
<a :href="'/sprints/' + sprint.id">#{{ sprint.title }} #{{ sprint.id }} </a>
</li>
</ul>
</template>
#endsection
and my js
Vue.component('os-sprints', {
template: '#my-sprints',
data() {
return {
sprintlist: [],
newSprint: ''
};
},
created() {
this.getSprints();
},
methods: {
getSprints() {
axios.get ('/api/team/sprints')
.then(response => {
this.sprintlist = response.data;
});
},
addSprint() {
alert("hit");
// this.sprintlist.push(this.newSprintname);
// this.newSprintname = '';
},
}
});
The errors I'm getting in console;
app.js:42229 [Vue warn]: Property or method "newSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn # app.js:42229
app.js:42229 [Vue warn]: Property or method "addSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn # app.js:42229
app.js:42229 [Vue warn]: Property or method "sprintlist" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn # app.js:42229
app.js:42229 [Vue warn]: Invalid handler for event "click": got undefined
I'm getting a sprintlist data fine but even without the text field and button I'm getting errors and my button method never hits.
Any feedback would be greatly appreciated
Chris!
This type of warning is usually caused by a variable not being defined yet. (I know, not very helpful). What I mean:
You passing a variable from one component A to another component B
While a variable is still being passed (have not reached the desired component B), component B is already being mounted
since a component B is already mounted, it is trying to use a variable that hasn't reached yet (ta da -> a warning)
Then a variable reached, Vuejs reacted and updated the view accordingly
This warning can be avoided by adding a v-if to an element or a wrapper
That's because you reference your data object properties and methods of a child component in parent component.
Move
<input type="text" v-model="newSprint">
<button #click="addSprint">add</button>
into your child component's template and you should be fine.
Ok I worked it out, I had tried to do what MatWaligora had suggested previously but the issue was I didn't realise I needed a single "parent" within the template. After I changed it to the below I got the functionality working. I'm still getting Vue warning messages as above but the page works.
<template id="my-sprints">
<div>
<ul class="list-group">
<li class="list-group-item" v-for="sprint in sprintlist">
<a :href="'/sprints/' + sprint.id">#{{ sprint.title }} #{{ sprint.id }} </a>
</li>
</ul>
<input type="text" id="sprinttext" v-model="newSprint">
<button #click="addSprint">add</button>
</div>
</template>
For me it was an extra closing tag in the loop.
<div v-for="(item, index) in items" :key="index">
<a :href="item.url">{{ item.name }} </a>
</div> // <- the issue
</div>
Double check all tags if other answers didn't help you.
I'm kind of new to laravel and trying to pull data from a database but keep hitting an error page saying there's an undefined variable within the view.
I'm supposing there's something I'm doing wrong (or not doing) within the controller. So I have a create.blade.php that posts data from a form to the database and everything works fine, however I want it such that after posting to the database to redirect to the show.blade.php showing the uploaded data and here is where I hit a brick wall with the error messages.
This is my store function within the controller -
public function store(Request $request)
{
$data4page = new Data4page;
$data4page->h1Ttle = $request->h1Ttle;
$data4page->h4Ttle = $request->h4Ttle;
$data4page->description = $request->description;
$data4page->save();
/*redirecting to the content's show page*/
return redirect()->route('content.show', $data4page->id);
}
And this is the show function within the same controller -
public function show($id)
{
//
$data4page = Data4page::find($id);
return view('digital.show')->with(compact('data4page'));
}
The error message I'm getting is -
Undefined variable: data4page (View: /var/www/html/theproject/resources/views/content/show.blade.php)
And in the show.blade.php this is a sample of what I have -
<h1>{{ $data4page->h4Ttle }}</h1>
<p>{{ $data4page->description }}</p>
<h4>{{ $data4page->h4Ttle }}</h4>
Having said all that, I have also tried various means of returning the view within the show function of the controller but all these result in the same error message above. These variants include -
return view('content.show')->with('data4page', $data4page);
return view('content.show',['data4page'=>$data4page]);
Update: I earlier had typos but now the error I get is -
undefined variable: {"id":9,"h1Ttle":"h1 sample text","h4Ttle":"h4 sample text","description":"body text goes here"} (View: /var/www/html/theproject/resources/views/content/show.blade.‌​‌​php)
This is the show.blade.php -
#extends('main')
#section('title')
#section('content')
<div class="app-template">
<main class="wrapperMain">
<div class="">
<aside class="navSidebar">
<nav class="navProperty">
<h1 class="navProperty-title">{{ $data4page->h1Ttle }}</h1>
</nav>
<footer class="footerProperty">
<div class="upcomingSchedule">
<h4 class="upcomingSchedule-heading">{{ $data4page->h4Ttle }}</h4>
</div>
</footer>
</aside>
</div>
<div class="content content--withSidebar">
<div class="lead--Home">
<p>{{ $data4page->description }}</p>
</div>
</div>
</main>
#endsection
You have a name mismatch.
return view('content.show')->with(['name' => $data4page]);
Here you should use:
<h1>{{ $name->h4Ttle }}</h1>
As you called it name
In your other options you defined Data4page and in your view you use data4page (lower case d).
Changed this
return view('content.show')->with(['name' => $data4page]);
To:-
return view('content.show')->with(compact('data4page'));
Hope it hepls!
Why have you resorted to typing the variable name with the wrong case when the answers given below are absolutely fine? PHP variables are case sensitive. You're passing $Data4page to your view in the code you've shown and then trying to use the access $data4page. Any of the below will work.
return view('content.show', ['data4page' => $data4page]);
return view('content.show', compact('data4page'));
return view('content.show')->with('data4page', $data4page);
return view('content.show')->with(['data4page' => $data4page]);
return view('content.show')->with(compact('data4page'));
You need to loop through the collection to get the value
#section('content')
<div class="app-template">
<main class="wrapperMain">
#foreach ($data4page as $d4p)
<div class="">
<aside class="navSidebar">
<nav class="navProperty">
<h1 class="navProperty-title">{{ $d4p->h1Ttle }}</h1>
</nav>
<footer class="footerProperty">
<div class="upcomingSchedule">
<h4 class="upcomingSchedule-heading">{{ $d4p->h4Ttle }}</h4>
</div>
</footer>
</aside>
</div>
<div class="content content--withSidebar">
<div class="lead--Home">
<p>{{ $d4p->description }}</p>
</div>
</div>
#endforeach
</main>
#endsection