I'm trying to learn Laravel and Livewire. Will it cause future problems if the CRUD is placed in a Livewire Component instead of a Controller?
Code inside the livewire component:
public function create()
{
$this->validate();
Page::create($this->modelData());
$this->modalFormVisible = false;
$this->reset();
}
public function read()
{
return Page::paginate(5);
}
public function update()
{
$this->validate();
Page::find($this->modelId)->update($this->modelData());
$this->modalFormVisible = false;
}
public function delete()
{
Page::destroy($this->modelId);
$this->modalConfirmDeleteVisible = false;
$this->resetPage();
}
There is no problem with implementing the crud functionality within a livewire component as long as that is that livewire component's main purpose. A livewire component is just another alternative solution equal to a controller.
Related
I'm trying to create a separate component to open a modal, but my events are not getting fired.
My parent component is Admin, and the component to open a modal is AddVideo
here is my Admin Component
public function add()
{
$this->emit('addvideoModal');
}
This is the button to fire that method
<x-jet-button wire:click="add">
{{ __('+ Video') }}
</x-jet-button>
This is from the AddVideoModal
class AddVideo extends Component
{
protected $listeners = ['addvideoModal' => 'render'];
public function render()
{
return view('livewire.add-video');
}
}
*Note, all my components are enclosed in a single Element. Am I missing something here?
Any help would be greatly appreciated.
apparently need to create a new method.
protected $listeners = ['addvideoModal' => 'sample'];
public function sample()
{
$this->addModal = true;
}
I have a component where I display the list of transactions and show details of each transaction using a modal.
class TableTranscation extends Component
{
use WithPagination, Alert, AuthorizesRequests;
...
public $transaction;
public $detailModal = false;
public function showDetail($id)
{
$this->transaction = Transaction::find($id);
$this->detailModal = true;
//dd transaction variable here return correct result
//dd($this->transaction);
}
public function render()
{
return view("livewire.user.transaction.transaction-table", [
"transactions" => current_user()->transactions()->paginate($this->perPage)
]);
}
}
Whenever I call to showDetail method from the component, the transaction remains Array[0] in Livewire devtool.
I tried adding the mount method but the Livewire devtool also showed Array[0].
public function mount()
{
$this->transaction = Transaction::find(1);
}
When I {{ dd($transaction) }} from the view it return correct transaction.
Any solution to this problem or bug from the tool?
I have a Blade Component class like this:
class RolesSelect extends Component
{
public $roles;
public $user;
public function __construct($roles = null, $user = null)
{
//... some logic goes here (irrelevant)
}
public function isSelected($user,$role)
{
// ... some logic
}
public function render()
{
return view('components.roles-select');
}
}
When I render my component as usual <x-roles-select></x-roles-select> everything goest fine.
But here starts the problem: when I load the component via AJAX, I use the view('components.roles-select')->render(). And the component can't see the isSelected method anymore.
It throws this error: Undefined variable: isSelected
I tried to research the Blade and Component classes, but only came this far:
$roleSelect = new RolesSelect($roles, $user);
$roleSelect->resolveView()->render();
I can access everything, but the isSelected method.
I was close enough. Dabbled a bit with the code, and got it working!
In my controller (or just the route method), you have to initialise the component class, and pass it's data to the view like this:
$roleSelect = new RolesSelect($roles, $user);
if (request()->wantsJson()) {
return response()->json([
'content' => $roleSelect->resolveView()->with($roleSelect->data())->render()
],200);
}
I have middleware where i check user status if is online or offline and it's working if i use blade, but since i'm using vue.js components i don't know how i can pass that to component.
in blade i can use:
#if($user->isOnline)
Online
#else
Offline
#endif
this is my user model:
public function isOnline()
{
return Cache::has('user-is-online-' . $this->id);
}
now my question is How can I use isOnline in my components?
PS: if you need any code i share just let me know
If you used blade to get the variable, you can only get it on page load. If your vue is not written in the blade file then your vue can't get the variable in your blade.
I would suggest you to make an API call using axios or something to your Laravel during the created life cycle of your vue component to get the variable.
// Vue
axios.get('example.com/api/users').then((res) => {
this.users = res.data;
}
// Laravel
Route::get('/users', UserController#index);
// Controller
public function index() {
return User::all()->map(function ($user) {
$user->isOnline = $user->isOnline();
return $user;
});
}
I have a form in route('users.create').
I send form data to this function in its contoller:
public function store(UserRequest $request)
{
//if form data is wrong:
return redirect(route('users.create'));
}
if form data is wrong I want return a new variable with return redirect(route('users.create')); to get in create view. Is it possible?
For a failed validation, you can flash data to the session on redirection.
public function store(UserRequest $request)
{
if(/* form validation fails*/)
{
return redirect(route('users.create'))->with('newVar', $newVar);
}
return redirect(route('users.create'));
}
Flashed data can be gotten in your view template.
#if (session('newVar'))
{{ session('newVar') }}
#endif