I'm using Laravel with a Vue component called vue-good-table. I just want to pass an array from my component to one of my Laravel routes and consequently to the respective controller.
I tried with axios but in this case it doesn't work, because the controller that receives the data must return straight away a Laravel view (but using axios the view is returned to the Vue component method as a response).
Maybe I can try to use a button that calls the route but I'm having trouble passing the array I need to pass. The route I specified must use the GET method.
MyTable.vue
<a :href="/pdf-download-selected/">
<button>Download PDF</button>
</a>
I really don't understand if my approach to Laravel with Vue is completely wrong or what..I mean I know how to pass data from Laravel to Vue, but not the opposite.
What do you recommend I do?
Thanks!
Related
I'm not used to Vue components. My second problem is, I wanted to pass data from laravel blade, to vuejs component in the right way. Because what I did is I store it to props, then pass the props into the data property, like this:
//ticket blade
<ticket-create :menu-categories-prop="{{ json_encode($menuCategories) }}"></ticket-create>
//ticket component
export default {
props: ['menuCategoriesProp'],
created(){
this.menuCategories = this.menuCategoriesProp;
},
data() {
return {
menuCategories: [],
}
}
}
now I have menuCategoriesProp and menuCategories data, which is kinda redundant. Am I doing it wrong?
It is not a redundancy problem, it's a logic problem. You should not pass ANY variable from blade to view in my opinion. You should do something like this:
Your controller (maybe from the index method) checks if the request wants a JSON response, if not returns the view, otherwise the collection as a JSON response (go on to understand why).
When the view is loaded, VueJs loads the component and (this is how I do it) within the mounted method you make an Ajax call (maybe with axios) to your controller which will return the collection
In this way you have an asynchronous request management, that will allow you to refresh the data, and avoid to reload the page each time.
As I wrote before, I would avoid as much as possible to pass properties from blade to vue, unless they're context variables like user preferences or system settings.
Your code is ok. You can get categories over ajax. In your case, it is not recommended to use ajax.
For redirection, in controllers, we can write like this:-
Redirect::Route('front_index')->with('RegError', 'An error occured while adding the user.');
How can I set up the href of an anchor tag so that I can send the 'RegError' too? Say something like this?
<a href="{{route('front_index')->with('RegError', '')}}">
actually you can't because with function is used to pass parameters from controllers to view and route helper doesn't have this method.
You need to make request and in controller pass your RegError
I am working on a Laravel app that has used Blade files for a while. We are switching part of the app to use Vue now. One of the endpoints we had used pagination with a page parameter at the end of it.
For example: /store/api/users?page=1 and each page would show 20 users -- sort of like a lazyLoad.
Does this make sense to keep it like this for Vue? With Vue, shouldn't the endpoint just get me ALL the users and then I can do what I want with that data?
No, you should not query all the data and return to vuejs. If your data is huge then you will be in big trouble with slower performance. So, it's always a good idea to use Larave's paginations even while you are responding json instead of view.
For example when you were using blade, you were doing something like:
$users = User::where('column', $value)->paginate();
return view('user.index', compact('user'));
Right? Now you are using Vuejs and still have you covered with it's nice length aware paginator instance. So, now you can do something like:
$users = User::where('column', $value)->paginate();
return $users;
This Will return all paginations meta data like, total page, current page etc.
So that, you can manipulate those data perfectly in vuejs.
I have a vuejs component that contains a form, I want to use the laravel old function so I'm able to repopulate the input fields if the form validation fails.
My guess would be I'd need to do something like pass the old function in as a prop to the component possibly but not sure if this is the 'right' way of doing it.
I'm just looking for confirmation on the best way of doing this.
If you are not using ajax requests then yes the only way is to pass them as props. Probably send the whole array as one prop: <component :oldInputs="{{old()}}"></component>
Is it possible to fill Backbone model with data from laravel cache, and how can I do it ?
Even if i don't know laravel i think this is quite possible. You only need to "render" or "print out" your laravel cache into a JavaScript code block. Please also see Passing PHP variable into JavaScript to see how you can pass values from php to JavaScript.
A good solution would be, if you can render out your laravel cache to json form and then pass this to the "model.set()" method of your Backbone model.