I am new to VueJS.
I have a link using Laravel Helpers:
{{ $tournament->id }}
As it will be inside a VueJS v-for, now I need to refer to Vue variables that I load with AJAX.
So, I tried to write it like that:
#{{ tournament.id }}
But I get
Parse error: syntax error, unexpected '{' (View: /home/vagrant/Code/resources/views/tournaments/index.blade.php)
Any Idea how to mix Laravel Helper and VueJS?
First of all it looks like you're missing quotes around #{{ tournament.id }}.
But after playing around with it myself it doesn't seem possible at the moment due to routes using the same brackets as placeholders.
A workaround would be to create a simple function somewhere that generates the url with a unique placeholder and afterwards you do a str_replace call on the generated url.
That's the thing I dislike in the helpers and I have completely stopped using them. IMHO the best way to go is to create a route for that (or a Route::controller) and map those urls to a controller. and then use something like:
#{{ tournament.id }}
Your routes could be something like:
Route::controller('tournament','TournamentController');
and your function inside the controller:
function getEdit($tournament_id){
// something something
}
And something like this would work
Related
I have never understood how to create proper URLs. Every time I end up with trying to figure out if I should do ?var=value or &var=value and then if ?var=value already exists then I end up with ?var=value&var=value.
P.S. I am working with Laravel. (So maybe there is a built-in function?)
For example:
I have pagination and my URL could look like this
www.example.com OR
www.example.com?name=John
Then my pagination link is href="?page=2" and I end up with
www.example.com?name=John?page=2
Then I want to navigate to the next page with href="?page=3" and I end up with this. Because it keeps on adding.
www.example.com?name=John?page=2?page=3
What a mess.... is there a function for PHP or Laravel that would create proper URLS? (knowing when to use ? or & and not add existing values all the time but replace them if they exist already.
If you're using Laravel I think you should use some helper functions:
route('user.profile', ['id' => 1]);
It will create url by route name and parameters, It will look like:
http://sitename/user/profile?id=1
And you can find some useful helper functions here
There should be one and only ? in URL's which separates URI and parameters, rest of the key-value pairs are separated by &, and if you need to pass & or ? as a parameter, then you need to encode them.
you could pass an array to http_build_query and it will build the url for you
and in laravel there are url helper functions you can use them with ease.
Laravel come with a route helper which allow you to generage url quickly by passing the name with which you register your route.
Route::get('/', 'HomeController#index')->name('home.route')
Here you can see I pass home.route to the name method which is the name which I use for this route. And when I want to generate the URL for that route in my view I will juste do
{{ route('home.route') }}
If ny route take some parameters like this
Route::get('/person/{id}', 'HomeController#index')->name('home.route')
In view I will generate the url like this
{{ route('home.route', ['id' =>$id]) }}
Because you want juste to make pagination, Laravel comme with a buil in pagination. When you want to paginate something in your views, you must just call the paginate function on your model and laravel will handle all the route for that. For example I you have a Person Model you can do that like this in your controller
$persons = Person::paginate(25)
And in your views to generate pagination for that you will have to do
{{ $persons->links() }}
And that's all
I have a resource route generated by Artisan command as
Route::resource('posts','PostsController');
the URI of this route is posts/{post}/edit which require a dynamic value in the middle. But because I'm using the url() method to link all of my routs I am forced to nest the template expression as:
Edit
This is giving me an error: NotFoundHttpException because it couldn't get the {{$show->id}} part. How can I fix this?
In PostsController, create a new variable that you want to show up in the template. You should be able to use the url() function within a controller. (See here) Pass this value to the template like you normally would.
Just in case: documentation on how to pass values to a template
Use Edit with out the use of {{}} notation.
You need double quote and remove one bracket
Do you looking for something like this?
#foreach($posts as $post)
Edit
#endforeach
i m new to vue & i does lots of google but have not found any solution which is match to my current situation so don't know how i can pass route in vue component,
is there any way to pass this laravel route into vue template as below. my vue is location is resource/assets/js
here is code
<template>
<a href={{route('/')}}></a>//i want to pass laravel route
//to view component this line
//throw error
</template>
route(web.php) code
Route::get('/' , function(){
Return view('homepage');
});
i want to pass this url into vue component whose location (vue) is resource/assets/js
You have to pass it as a prop inside your vue component.
They are two different steps.
Laravel spits out the compiled template
Vue parses the components and initializes them.
At step 2 you have to pass a prop with the route parsed at step 1
Something like this
<my-component route="{{ route('my-route') }}"></my-component>
Then within your component
<template>
<a :href="route">CLICK HERE</a>
</template>
<script>
...
props: {
route: { type: String, required: true }
}
...
</script>
Try with
<a :href="{{route('/')}}"> or <a v-bind:href="{{route('/')}}">
Don't use double curly brackets in your Vue components in relation to Blade. They are not functionally equivalent. Instead, pass the url as a string or bind it to a data attribute. The interpolation error you're seeing is a result of using the curly brackets and expecting them to be rendered vie the blade engine.
Your example is quite simple as route('/') is equivalent to just /.
// this is all you need to hit your defined route.
...
Take a look at this package for generating client side routes and helpers in the Laravel fashion. Quite a handy package, I might add. I've used it myself in several larger projects.
https://github.com/aaronlord/laroute
As an aside, you mean the resources location resource/assets/js. Ultimately, that component will be located within your public directory if you use a build tool such as webpack, grunt, gulp, etc. so it's current location within the project directory isn't particularly relevant.
OK, since none of above really worked for me, my solution is:
<my-component route="'{{ route('my-route') }}'"></my-component>
(This is an example of passing a route through component's props, but should work the same when used within <a href=...)
For me looks like Vue doesn't know that you're trying to pass a string so tries to evaluate your route as an expression. Quotes tell Vue that you want this to be a string.
Another solution, which works for passing almost everything (for instance whole objects) to Vue is encoding your variable using JSON format like:
<my-component route="{{ json_encode(route('my-route')) }}"></my-component>
Or Laravel 5.5 and up you can use #json shortcut Blade directive for json_encode:
<my-component route='#json(route('my-route'))'></my-component>
Going further about JSON and objects - if Blade destroys your object data because of escaping the content you can use the following code:
<my-component route="{!! json_encode(route('my-route')) !!}"></my-component>
More on JSON and escaping data in Blade you can find here.
I'm middle of build my own site and in every form I just sick with type like
{{ Route('something.something', ['something'=>$someting->id]) }}
.. I know that I can make some shortcut method for (every) route (I want) but it feels somewhat .. I just don't like it. OCD......
Is there some build-in method or other awesome way like above??
I've joined new project of website in Symfony3 framework and now I'm struggling an issue, trying to figure out this particular syntax in Twig:
<li>{{ 'site.template.menu.contact'|trans }}</li>
Arguments in path() twig function have name of route in my SiteController but i totally don't know what does code between <a/> tags, except 'trans' filter. I don't have any variables in my twig template file.
Have you seen something like this before? Where I should find information about this in docs or how to name syntax like this to find some information?
It is just the twig "internationalization" (often abbreviated i18n).
Docs for it are here.
The quotes around the object shouldn't be there. I'm assuming that an object called site is being passed to the view, so it should be {{ site.template.menu.contact|trans }}
To explain the dot notation in twig;
If your PHP array is something like;
$site['template']['menu']['contact'] = 'fubar';
If it is an object then it is just attributes of the object.