I am building a Laravel Inertia eCommerce SPA, and I am trying to add several filters to the products page, using the watch method that calls up a partial reload on change.
The problems are three-fold:
I don't know the correct syntax to have the watcher keep an eye on the whole filters prop, rather than individual filters.
The individual filters that I do manage to apply do not refresh the page content after being switched off, only on.
Lastly, I don't know how to check if other filters are active, and prevent conflict when writing filter queries.
Here is my Vue component https://i.imgur.com/dxt1e5n.png and https://i.imgur.com/2VThbWv.png
And the route in question https://i.imgur.com/rLwoW9g.png
Any pointers that anyone might be able to provide would be very helpful.
Related
I'm developing a personal project using Laravel with Inertia.js. I tried retrieving data from back-end to front-end through HandleInertiaRequests Middleware. I was wondering how will malicious people could get advantage of the data I show up in front-end. Inertia.js webpage discourages retrieving sensible data in this way, but I can't figure out how that will be possible. I apologize if my answer sound a little naive, still pretty new to Laravel ad never used Inertia before. Thanks for your time!
The HandleInertiaRequests Middleware is nothing but a way to merge data into the array that will be available to your JavaScript components (Vue, React, Svelte) on the client side.
It is just a way to avoid repeating yourself on every controller for things that you'll probably need on a lot of pages. For example, instead of getting the data for a Menu component on every controller, you do this only in the HandleInertiaRequests Middleware.
So, they only warn you to be careful with what type of data you put into it. For example, you probably don't want to pass the user password through this in the same way you wouldn't do that using a Blade view instead of Inertia.
I'm attempting to design a project in Laravel. I ran the following command to initialize the project: "laravel new demo --jet". When prompted to choose between inertia and livewire I chose livewire as I've heard better things about it.
A little back story, I'm about 2-3 weeks into learning Laravel and I've never used livewire before, although I am very familiar with using Javascript and am very experienced with Vue.js. I've looked elsewhere for a solution to my problem but now I'm not quite sure if Laravel even supports exactly what I'm looking for.
TL/DR:
I'm wondering what the best practice would be for rendering child components on a page. I would like to create a dashboard that has several options to choose from on the left side of the page. When a user selects an option, I'd like for a corresponding component to appear in the center of the page. If a user were to select a different option, the original child component would disappear and a new corresponding child component would become visible.
Ideally, I'd like to avoid using the router for this, although that might just be because I'm not entirely comfortable with using it. I do understand it's pretty heavily integrated into the Laravel workflow. As I mentioned, I'm used to using Vue where you can easily integrate JS functionality into your html and use conditional statements to hide/show child components without changing routes.
If anything I've said above is causing any confusion, let me know. Thanks.
P.S. If anyone has any good resources for learning livewire & laravel together please let me know about them! Laracasts has been great but I think Laravel recently updated their auth scaffolding and it's causing some confusion for me.
I can develop Laravel packages and can made custom blade, migration, model, controller, route from a package. But my question is specifically on how can I plug onto a default CRUD that was already built, from a package to modify that.
I started my PHP career from CMS like WordPress, Drupal, and then CakePHP, Laravel. Starting with procedural coding, OOP was a learning curve and is still a learning curve for mine. But scouring different platform made me understand that, the same thing can be achieved in different ways.
With WordPress plugin development experience, it's easy to extend functionality using action and filter hooks. With a core functionality like:
Fetch form data (3 fields)
hook here <---
Load form data (3 fields)
Submit form data (3 fields)
hook here <---
Save form data (3 fields)
can be easily modified from a plugin like:
Fetch form data (3 fields)
action hook <--- (hooked - added 2 fields)
Load form data (5 fields)
Submit form data (5 fields)
filter hook <--- (hooked - added data of 2 additional fields)
Save form data (5 fields)
But when in Laravel, I want to achieve a similar feature being in Laravel scope, how can I?
I understand the use of #yield('my_hook') is similar to the action hook in WordPress. But found that, if I hook multiple onto #yield it's getting overridden.
I found several packages like eventy with a similar approach of action and filter hook of WordPress, but I'm actually asking for a Laravel approach to the issue.
I came across to the Laravel Events, is that the solution to hook like an action hook in WordPress? And the filter hook, I think we can extend a model to modify its behavior. But I'm afraid, these are all the imagination, and might not be the reality. I don't have any idea on that.
Can I get some enlightenment onto this issue?
Both WordPress and Laravel are frameworks on a whole different level, so comparison might be difficult.
In Laravel you have tools to control the output (html page). #yield is an example, when you are using Blade templates.
Furthermore there are methods to hook on certain events within the execution of the framework (Laravel Events).
In Laravel you are working in a Model-View-Control setting meaning that you can/should:
Make a Model of every data-entity you are using and give it the responsibility to do it's own work. See also https://laravel.com/docs/5.8/eloquent#events for hooks
Make Controller methods for every action you want to execute from the front-end. It is a good practice to keep these methods as short as possible. e.g. max 10 lines.
Make sophisticated templates using the Blade Template engine
Hope this will help.
How to update data in multiple places without reloading the page in Vue.js?
This is my example.
When I add a new application, a new reminder is created. How to use this data in different places on the page?
Important: all elements are in different components.
Use Vuex or a global event bus depending on the complexity of your application.
If your application is starting to become more enriched with Vue components that need to communicate beyond simple child/parent and parent/child communications, then Vuex should be a good fit.
I am not going to go into depth about the technicalities because that information can be found in the documentation. Good luck.
I'm starting a new large-scale application and after hearing a lot about VueJS + Laravel combination i thought of using it. I followed Laracasts' Learn Vue 2: Step By Step series and some tutorials to understand how it works.
But have few questions in mind:
Why do we even need to use Vue with Laravel. I understand that we can create component like <user-profile></user-profile> in Vue, and then use it in Laravel Blade. But it looks like over-complication things? Firstly we pass data from controller to blade, and then further pass it to vue. Why do we need to do that?
Laravel and Vue both have their own routing system. Which one to use?
How to structure an app using Laravel + Vue
PS. I'm making an application that will mostly be used on mobile devices.
moved from comment
Why do we even need to use Vue with Laravel.
Although you probably already knew, Vue is just one of many javascript frontend frameworks (libs?) You can consume the data send from the server any way you want. Vue is just the sister-framework of Laravel. The only thing you can probably say as to why they are mentioned together is that you can "talk" (interface) easily between them using json objects. Javascript is meant to make your page interactive, have behaviour. Use it when you need this.
Laravel and Vue both have their own routing system. Which one to use?
Whatever you want, do you want a "single page" (blade) that is rendered in 3 different pages by Vue, say like some kind of Wizard form. It really depends on where you want to put the load. I think you can think of use-cases where client side page rendering would be better, but most of the time server sided will be a great choice.
Single page applications are more snappy (faster) after initial load, but server side rendered applications are better for SEO in general. There are also ways to let a SPA render on the server to improve SEO however. And this we we can keep the discussion going for some while.
How to structure an app using Laravel + Vue
Laravel has already an example vue file under resources/assets/js/app.js. So it is safe to assume you can put everything there.