I'm using Vue.js and Laravel to render a simple table listing products. From there I want to link to a product detail page like this:
#{{ product.id }}
Since the table is generated on client side base on a data object, I'm looking for the most elegant way to implement that while not bypassing any laravel methods like route() that allows me to link to a named route.
Do I really have to manually merge the result of the route-method with the Vue variable in Javascript?
In my mind is something like:
#{{ product.id }}
which I could probably parse/inject by Vue via data binding?
As Vue it's client side and laravel it's server side you can't accomplish that in that way.
But you can do something like this over the rendered route:
Create a vue method
goto_route: function (param1) {
route = '{{ route("yournamedroute", ["yourparameter" => "?anytagtoreplace?"]) }}'
location.href = route.replace('?anytagtoreplace?', param1)
}
Now in your action element
<div v-for="o in object">
<a v-on:click="goto_route(o.id_key)">press</a>
</div>
Basically you're replacing the... uhmm... let's name it "placehoder" in the rendered route with the required value.
hope it helps.
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 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 a software engineer and don't have a lot of experience with PHP or javascript. I will upgrading my skills in this so i started with a PHP framework Laravel which looks very nice in my opinion. I'm familar with the MVC principal so i can find my way in Laravel!
I created some models with corresponding controllers. I also created some blade views to display the data. I give a model object to the blade view as folows:
$person = new \App\Person("Firstname", "Lastname");
return view('personView', compact('person'));
I can get it done to use the person object in the blade view to display his variables with:
{{ $user->name }}
Now i tried to go one step further and want do do some stuff with Vue so i can display and manipulate the object on client side (and dispay dynamic data). Later i want to save the client side object via a action in the controller over a HTTP post or something, but fist things first...
I'm be able to create a vue object with some data in it and display it in HTML controlls for example.
So, summerized
i'm be able to generate my backend objects and manipulate them. I can bring them to my view and display them with {{ $obj->var }}
I'm be able to create Vue objects with data, and manipulating this data and show it with #{{ data }}.
My problem is that i can't get the data from the controller (which i give wat i gave to the view) into the Vue object. What is the best practice to do this? Or is this not the way to go? in that case, what is convinient to do as i read that Laravel has Vue integrated and this sounds for me that there should be a (best practice) way to achieve this?
I looked for a creat tutorial but couln'd find this. So if someone has a good tutorial to learn understanding Laravel in combination with Blade and Vue, please share!
I already tried something like this, unfortunately without any result:
new Vue({
el: '#someElement',
data: {
person: {!! $person!!}
}
})
(Using Laravel 5.4.x and Vue 2.4.x)
You can simply pass the object to the vue component like that:
<my-component :person="{{ $person }}" ></my-component>
And your Vue component
<template>
{{ person.name }}
</template>
<script>
export default {
props: ['person']
}
</script>
Hi I have a hyperlink from a page:
<h3>hitest</h3>
the route:
Route::get('hitest', function(){ return 'hitest message';});
There is an error:
No query results for model [App\User2].
hyper link is from a page with this url
/userpage/1
the 1 is a model object.
Shouldn't the hyperlink route to /hitest ?
Please see my other post: Strange behavior with routing and hypertext.
I'm new at web development. Is there configurations for routing? The app is hosted (not local).
As bytesarelife already mentioned, you can use the url()-function, like so:
{{ url('your/url/') }}
A better way in terms of maintainability would be to give your routes names, so you would not have to replace every url in every template once you want to change it. You can do so, by adding the name in your routes:
Route::get('hitest', function(){ return 'hitest message';})->name('getHittest');
And then you can use the route function in your view:
{{ route('getHittest') }}
Is there some way I can use blade type syntax with React to handle my Laravel routes? Let's say I have something like the following:
<div class="card">
Go to your account
</div>
If I try to make this into a Reactjs component, clearly the blade type syntax won't work.
I have looked into React Router, but don't exactly know how it would fit into my application, or if it is even necessary for me to use (I'd much rather use plain Laravel routes).
React code is not executed by Laravel, but by the user's browser. So when the time comes to generate that href, inside the user's browser, the code does not have any more access to Laravel or Blade tools.
What you can do is to pass all the info you need to your React app, beforehand, when you use blade to generate the top level React invocation:
<script>
React.render(
MyApp({
accountShow: "{{ route('account.show', $user->slug) }}",
//etc.
}),
document.getElementById('myContainer')
)
</script>
So then in your React app you can use those properties and pass them down to inner components, e.g:
<CardLink href={this.props.accountShow}>
Go to your account
</CardLink>