I have a route:
Route::get('/{my_parameter}/home', function($my_parameter) {
return view('home_view')->with('my_parameter', $my_parameter);
}
In my home_view.blade.php file:
<div>
{{$my_parameter}} {{-- displays properly --}}
<vue-component #click="doSomething( {{$my_parameter}} )">Click me</vue-component> {{-- does not work--}}
</div>
I've tried numerous variants as suggested in my searches, including #{{$my_parameter}}. When I use a hard-coded string, #click=doSomething('my_value'), the function works properly.
How do I successfully get a route parameter from blade for use in a vue component? Thank you.
I think you just forgot to add quotes around the parameter. If you have doSomething({{ $my_parameter }}) and the parameter is broccoli, it's going to turn into doSomething(broccoli) rather than doSomething('broccoli').
Related
I'm using soft deletes and trying to make a function to restore the deleted row. Really everything to do with submitting the form doesn't work, even deleting...
My tags are within a forelse loop, maybe that's the cause??
Route is (this is above my resource route):
Route::post('/post/restore/{id}', [PostController::class, 'restore'])
->name('post.restore');
Controller is:
public function restore($id)
{
dd($id);
}
Form/view is:
<form action="{{route('post.restore', $post->id)}}" method="POST">
#csrf
<button type="submit" class="dropdown-item popup" data-confirm="Would you like to restore?">Restore</button>
</form>
After submitting, it just takes me to:
domainURL/post/null
and gives a 404 error
Any advice?? I also tried it without the {id} at the end of the route, same results
I think you are using the wrong syntax for route function, instead of this:
route('post.restore', $post->id)
you should use it like this:
route('post.restore', ['id' => $post->id])
you can read more here as well.
I figured it out... my "would you like to restore?" javascript function was breaking the form. I was using javascript to popup a confirmation message before submitting and during that process it lost the ID
I got rid of that and it works fine
Thank you!
I am using Laravel 8 and I can't find a way to solve this problem.
I have a app-layout like this:
<!-- ./app-layout.blade.php -->
<html>
<head>...</head>
<body>
<livewire:create-suggestion />
{{ $slot }}
</body>
</html>
And this view uses the app-layout:
<!-- ./index.blade.php -->
<x-app-layout>
...
</x-app-layout>
In controller, I pass a variable to index view:
public function index() {
return view('index', ['variable', '$variable']);
}
How can I pass this variable to the app-layout? Because I also want to
use this in the create-suggestion livewire component.
Try this. edit your index.blade.php
#extends('app-layout', ['variable' => $variable])
...
You can pass any variable attribute to the layout like so:
<x-layout :myvariable=$myvariable>
or static attribute values like so
<x-layout myvariable="This is a string">
and retrieve it in the layout.blade.php like so:
{{ $attributes['myvariable'] }}
First off I beleive the App Layout will have access to whatever is passed by the view function. But if I am wrong or you wish to pass any custom variable whatsoever using the Layout syntaxt as opposed to template inheritance the way would be: (I came cross your question having a problem passing a static string for my HTML page title and no solution worked until I found this)
<x-app-layout>
<x-slot:variable>{{$variable}}</x-slot>
</x-app-layout>
However your issue is you are using Livewire and livewire is not simply just a view! Laravel Intentionally makes Livewire independent from the rest of the page. You would have to either pass it in PHP as param during mount which will only be accessible if set during the mount function() in \App\HTTP\LiveWire\createSuggestion.php
#livewire("create-suggestion",[ $variable])
Or ideally you have your javascript use the $emit feature to pass the element to the livewire listener all handled via Livewire. It seems to me you are using Livewire for something that you should simply only use Blade/Views:
#include("create-suggestion");
i'm trying to write my own blog software based on vue.js/laravel for learning purposes.
Background
I'm asking myself how i write vue.js components in which the paths/urls are not hard coded. In the following example i have a post-listing component which lists all posts from the database. The json data is returned by a laravel api route (e.g. /api/posts)
In the listing i use a link to a laravel view (e.g. /posts/{id}) which shows the actual body of a specific post with {id}.
Example
In laravel's api.php route file i can give a name to a specific route and use it with route('api.posts.index'). That's dynamic enough i guess?
api.php
Route::get('', 'Api\ApiPostsController#index')->name('api.posts.index');
index.blade.php
<post-listing postsview="{{ route('web.posts.show') }}" postsapi="{{ route('api.posts.index') }}"></post-listing>
PostListing.vue
In my vue component i refer to these properties postsview and postsapi
<template>
<div>
<h2 class="title is-2">Recent posts</h2>
<ul>
<li v-for="post in posts['data']" v-bind:key="post.id">
<a :href="postsview + '/' + post.slug" v-text="post.title"></a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ["postsapi", "postsview"],
data() {
return {
posts: []
};
},
methods: {
getPosts() {
axios.get(this.postsapi).then(response => (this.posts = response.data));
}
},
mounted() {
this.getPosts();
}
};
</script>
The question
Is there a "best-practice" way or at least a better approach? Somehow i'm not happy with this solution, but lacking experience, i don't know where to begin.
Thanks.
There are many ways to achive this, this are a few options that I know of.
1: Use blade to pass the route to the component
<component route="{{ route('route_name') }}"></component>
2: You can save a global variable with all the routes you have defined.
You can use Route::getRoutes() to get all the routes
and add it to your window on your front end
3: Use a library,
This library does exactly what you are looking for I think.
https://github.com/tightenco/ziggy
If find other options please let me know, this is a common issue for most laravel developers.
I have a Laravel application. One of the pages can be reached via the following URL
http://localhost:8000/items/gallery?item_type=glasses
As the amount of items to be shown can be quite substantial, I'm using pagination. I have the following code in my view:
#foreach($media as $media_item)
<div class="col-md-3">
<div class="card">
<img class="card-img-top" src="{{ asset('storage/'.$media_item->id .'/'. $media_item->file_name) }}" ">
</div>
</div>
#endforeach
{{ $media->links() }}
and in the controller, I'm using:
$media = Media::paginate(5);
The pagination buttons are shown and work for the 1st one. Then when I click on the second (or third or fourth...) one, I get the following error message:
Method Illuminate\Database\Eloquent\Collection::links does not exist.
I see the link is trying to reach:
http://localhost:8000/beeritems/gallery?page=2
whereas I need:
http://localhost:8000/beeritems/gallery?item_type=glasses&page=2
In Laravel, how can I change the links() method to include the part after the question mark?
You must use ->appends() methods
$media = Media::paginate(5);
$media->appends($request->all());
you can use laravel basic URLs instead of getting gallery images with URL get parameters.
something like this:
define Route like this
/items/gallery/{types}
then using it like
http://localhost:8000/items/gallery/glasses
in this case you don't get that error anymore
I want to use Laravel Blade and AngularJS.
Is some way to change interpolate sintax, change {{text}} for [{text}] or somthing like that?
I already change all components.ts files adding the line:
interpolation: ["{[", "]}"],
but, where I write blade, app breaks...
Thanks a lot everybody ;)
You can define your Blade content tags in your routes.php file:
Blade::setContentTags('<%', '%>');
Blade::setEscapedContentTags('<%%', '%%>');
EDIT: You can add # in front of the brackets, so Blade won't render it.
#{ var }
or you can pass the directive for blade not to render part of the HTML using #verbatim keyword.
#verbatim
<div>
{{ var }}
</div>
#endverbatim