I am using Livewire to create a form which databinds to the model like this, notice <select/> has multiple attribute:
#php
$items = ['bag','hat','mug','stickers'];
#endphp
<select wire:model="extra" multiple >
<option disabled value="select" >Select</option>
#foreach ($items as $item)
<option value="{{$item}}" >{{$item}}</option>
#endforeach
</select>
and the model class has a var on top:
public $extra = [''];
I would like to select multiple <option/> with just a click, currently you have to use the keyboard [command] + click.
I am trying to add logic in the model class but state of public $extra = ['']; is an issue.
example:
<option value="{{$item}}" wire:click="buildArr('{{$item}}')">{{$item}}</option>
then from model, $this->extra[] does not build on the array but rather refreshes and returns the last <option/> clicked:
public function buildArr($item){
$this->extra[]= $item;
}
How can I allow 1 click to build on this array? Do I need AlpineJS?
the answer to my problem was here https://laravel-livewire.com/docs/2.x/alpine-js#interacting-with-livewire-from-alpine
using: $wire.myMethod() from blade.
Related
I want add new Inputbox to be created when the user clicks the add button.
I tried the following code but it didn't work, And I get the following error:
get_class(): Argument #1 ($object) must be of type object, string
given
class Test extends Component
{
public $tests=[''];
public function render()
{
return view('livewire.test');
}
public function mount()
{
$this->tests = Test::all();
}
public function add()
{
$this->tests[] = '';
}
}
<div>
<form wire:submit.prevent="submit">
#foreach($tests as $index=>$test)
<div>
<label for="title">
<input wire:model="title.{{$index}}" type="text">
</label>
</div>
#endforeach
<button type="submit">Save</button>
</form>
<button wire:click="add()">ADD MORE</button>
</div>
There are a few issues to address here, so I will provide some background information and try to be as descriptive as possible.
In your mount function you assign a collection of Test objects to your tests array property:
public function mount()
{
$this->tests = Test::all(); // <-- returns a collection of Test models
}
This overrides the default value and type you have assigned to tests which is an array:
/*
* This declares $tests to be an array
* but this becomes a Collection due to your mount method
*/
public $tests = [''];
Yet in your add function you're adding a string:
public function add()
{
$this->tests[] = '';
}
So you're getting the error because you're trying to add a string to a variable that is a collection of Test models. What you likey want to do is add a new empty Test model.
public function add()
{
$this->tests->push(Test::make());
}
However, the above will not work as you're working with an existing database collection and so you'll get the following error:
Queueing collections with multiple model connections is not supported.
Therefore to achieve your goal of adding a new Test we need to approach this differently.
app\Http\Livewire\Test.php
<?php
namespace App\Http\Livewire;
use Illuminate\Support\Collection;
use Livewire\Component;
class Test extends Component
{
// A collection of your models from the database
public Collection $tests;
// A conditional variable that we use to show/hide the add new model inputs
public bool $isAdding = false;
// A variable to hold our new empty model during creation
public \App\Models\Test $toAdd;
// Validation rules
// These are required in order for Livewire to successfull bind to model properties using wire:model
// Add any other validation requirements for your other model properties that you bind to
protected $rules = [
'tests.*.title' => ['required'],
'toAdd.title' => ['required']
];
// Livewires implementation of a constructor
public function mount()
{
// Set some default values for the component
$this->prepare();
}
public function render()
{
return view('livewire.test');
}
//
public function add()
{
// Set the show/hide variable to true so that the new inputs section is shown
$this->isAdding = true;
}
// Save the new model data
public function save()
{
// Save the model to the database
$this->toAdd->save();
// Clean things up
$this->prepare();
}
// Just a helper method for performing repeated functionality
public function prepare()
{
// Get all the required models from the database and assign our local variable
$this->tests = \App\Models\Test::all();
// Assign an empty model to the toAdd variable
$this->toAdd = \App\Models\Test::make();
// Set the isAdding show/hide property to false, which will hide the new model inputs
$this->isAdding = false;
}
}
resources\views\livewire\test.blade.php
<div>
<!-- loop over all your test models -->
#foreach ($tests as $index => $test)
<!-- the :key attribute is essential in loops so that livewire doesnt run into DOM diffing issues -->
<div :key="tests_{{ $index }}">
<label for="tests_{{ $index }}_title">Title {{ $index }}
<input type="text" id="tests_{{ $index }}_title" name="tests_{{ $index }}_title"
wire:model="tests.{{ $index }}.title" :key="tests_{{ $index }}_title" />
</label>
</div>
#endforeach
<!-- Only show the new model inputs if isAdding is true -->
#if ($isAdding)
<!-- this doesnt need a :key as its not in a loop -->
<div>
<label for="title">Title
<input type="text" id="title" name="title" wire:model="toAdd.title" />
</label>
<!-- triggers the save function on the component -->
<button type="button" wire:click="save">Save</button>
</div>
#endif
<!-- triggers the add function on the component -->
<button type="button" wire:click="add">Add More</button>
</div>
Hopefully, with the comments I have added the above makes sense.
Update
Is it possible to create several input boxes and finally save all the data at once?
That is entirely possible yes. Due to some limitations with Livewire, specifically it not knowing how to hydrate Eloquent Models in a Collection correctly, we need to use a little wizardry to make it work.
app\Http\Livewire\Test.php
<?php
namespace App\Http\Livewire;
use Illuminate\Support\Collection;
use Livewire\Component;
class Test extends Component
{
// A collection of your models from the database
public Collection $tests;
// A conditional variable that we use to show/hide the add new model inputs
public bool $isAdding = false;
// A variable to hold our new empty models during creation
public Collection $toAdd;
// Validation rules
// These are required in order for Livewire to successfull bind to model properties using wire:model
// Add any other validation requirements for your other model properties that you bind to
protected $rules = [
'tests.*.title' => ['required'],
'toAdd.*.title' => ['required']
];
// Livewires implementation of a constructor
public function mount()
{
$this->cleanUp(true);
}
public function hydrate()
{
// Get our stored Test model data from the session
// The reason for this is explained further down
$this->toAdd = session()->get('toAdd', collect());
}
public function render()
{
return view('livewire.test');
}
public function add()
{
$this->isAdding = true;
// Push (add) a new empty Test model to the collection
$this->toAdd->push(\App\Models\Test::make());
// Save the value of the toAdd collection to a session
// This is required because Livewire doesnt understand how to hydrate an empty model
// So simply adding a model results in the previous elements being converted to an array
session()->put('toAdd', $this->toAdd);
}
public function save($key)
{
// Save the model to the database
$this->toAdd->first(function ($item, $k) use ($key) {
return $key == $k;
})->save();
// Remove it from the toAdd collection so that it is removed from the Add More list
$this->toAdd->forget($key);
// Clean things up
$this->cleanUp(!$this->toAdd->count());
}
public function saveAll()
{
$this->toAdd->each(function ($item) {
$item->save();
});
$this->cleanUp(true);
}
// Just a helper method for performing repeated functionality
public function cleanUp(bool $reset = false)
{
// Get all the required models from the database and assign our local variable
$this->tests = \App\Models\Test::all();
// If there are no items in the toAdd collection, do some cleanup
// This will reset things on page refresh, although you might not want that to happen
// If not, consider what you want to happen and change accordingly
if ($reset) {
$this->toAdd = collect();
$this->isAdding = false;
session()->forget('toAdd');
}
}
}
resources\views\livewire\test.blade.php
<div>
<!-- loop over all your test models -->
#foreach ($tests as $index => $test)
<!-- the :key attribute is essential in loops so that livewire doesnt run into DOM diffing issues -->
<div :key="tests_{{ $index }}">
<label for="tests_{{ $index }}_title">Title {{ $index }}
<input type="text" id="tests_{{ $index }}_title" name="tests_{{ $index }}_title"
wire:model="tests.{{ $index }}.title" :key="tests_{{ $index }}_title" />
</label>
</div>
#endforeach
<!-- Only show the new model inputs if isAdding is true -->
#if ($isAdding)
<div>
#foreach ($toAdd as $index => $value)
<div :key="toAdd_{{ $index }}">
<label for="toAdd_{{ $index }}_title">New Title {{ $index }}
<input type="text" id="toAdd_{{ $index }}_title"
name="toAdd_{{ $index }}_title" wire:model="toAdd.{{ $index }}.title"
:key="toAdd_{{ $index }}_title" />
</label>
<!-- triggers the save function on the component -->
<button type="button" wire:click="save({{ $index }})" :key="toAdd_{{ $index }}_save">Save</button>
</div>
#endforeach
<button type="button" wire:click="saveAll">Save All</button>
</div>
#endif
<!-- triggers the add function on the component -->
<button type="button" wire:click="add">Add More</button>
</div>
I've not removed some of the previous comments and not commented on the code that should be pretty obvious what it is doing.
I did rename the prepare function to cleanUp and it seemed more appropriate.
I also provided functions for saving an individual Test model, or all at the same time. You might want to be able to do one or the other or both at some point so seemed useful.
I am trying to fetch a list from the database into a <select> for the form.
I have a controller with classes (index, getLocations, create, store, edit, update, destroy)
public function getLocations($locationList)
{
$locationList = Locations::select('id', 'locationName')->get();
return view('pages.dataEntry.reports.reports', compact('locationList'));
}
getLocation has its own Model:
class Locations extends Model
{
use HasFactory;
protected $table = 'kaec_locations';
}
and I get undefined variable $locationList is undefined
<select class="form-select" name="caseLocation">
<option value="none" selected disabled>Select Location</option>
#foreach ($locationList as $item)
<option value="{{ $item->id }}"> {{ $item->locationName }} </option>
#endforeach
</select>
Is this a good practice? to have a separate Model for locations?
How come the variable is undefined? Should it be included in the route?
Route::controller(ReportController::class)->group(function () {
Route::get('reports', 'getLocations');
Route::get('reports', 'index')->name('reports.index'); // Index page (DataTable)
Route::get('reports/create', 'create')->name('reports.create'); // The form for adding new records
Route::post('reports/create', 'store')->name('reports.store'); // Add new to DB
Route::get('reports/edit/{report}', 'edit')->name('reports.edit'); // The form for editing records
Route::put('reports/edit/{report}', 'update')->name('reports.update'); // Update record to DB
Route::get('reports/{report}', 'destroy')->name('reports.destroy'); // Delete from DB
});
Got it. I do not need to make a function for this. I already have function for adding new data create(). The Create refers to the blade file of the form I want to display that <select>
So I just removed the getLocations() and added the code to create()
/**
** Add new Record Page.
**/
public function create()
{
$locationList = Locations::all();
return view('pages.dataEntry.reports._addForm', compact('locationList'));
}
I'd like to refresh the child component when the parent is updated and only the child component of this component should update, because I'd like to reuse the child component somewhere else in the page. The components structure is the following.
UserShow.php
class UserShow extends Component
{
public User $user;
public int $userId;
public function mount() {
$this->user = User::first();
}
public function updatedUserId() {
$this->user = User::find($this->userId);
}
public function render() {
return view('livewire.user-show');
}
}
<div>
<select wire:model="userId">
<option value="1">Matteo</option>
<option value="2">Giulia</option>
<option value="3">Mattia</option>
</select>
<div>
Name: {{ $user->name }}
#livewire('user-show-email', ['user' => $user])
</div>
</div>
UserShowEmail.php
class UserShowEmail extends Component
{
/** #var User */
public $user;
public function render() {
return view('livewire.user-show-email');
}
}
<div>
Email: {{ $user->email }}
</div>
When the user in UserShow is changed via updatedUserId() method, I'd like that $user prop in UserShowEmail will change accordingly. By reading the docs it seems that Livewire is not able to automatically refresh the child component.
I wonder if there's a workaround, or something that allow me to refresh the child component when parent changed.
Thanks!
If you don't mind updating the whole child component, this would be one way of doing it:
There's a trick that always work for me when I want to make a child
Livewire component "reactive". In your parent livewire component you
use a timestamp for the key attribute:
<livewire:child-component key="{{ now() }}" :my-prop="$myModel" />
The tricky part is the now() function in key prop. This component now
will always be updated when the parent is updated.
In your parent component:
<div>
...
<div>
Name: {{ $user->name }}
<livewire:user-show-email key="{{ now() }}" :user="$user" />
</div>
</div>
You can read more about it here and here.
i am trying to make a list of locations that you can rent. but to rent the place you need to fill in some information. to fill in this information you excess another page. how do i make it so laravel knows the page belongs to a certain location
this is what ive done now but i keep getting the error:
Call to undefined method App\Reservation::location()
as soon as i have filled in the fields of information
this is the blade file that links to the the create reservation file
#foreach
($locations as $location => $data)
<tr>
<th>{{$data->id}}</th>
<th>{{$data->name}}</th>
<th>{{$data->type}}</th>
<th><a class="btn" href="{{route('Reservation.index', $data->id)}}">rent</a></th>
</tr>
#endforeach
this is the create reservations blade
<form action="{{ route('location.store') }}" method="post">
#csrf
<label>title</label>
<input type="text" class="form-control" name="name"/>
<label>type</label>
<select>
<option value="0">klein</option>
<option value="1">groot</option>
</select>
<button type="submit" class="btn">inschrijven</button>
</form>
this is what the location controller looks like
public function store(Request $request)
{
$location = new Reservation;
$location->name = $request->get('name');
$location->type = $request->get('type');
$location->location()->associate($request->location());
$location->save();
return redirect('/location');
}
and the relationships in my models should also work
class Reservation extends Model
{
public function locations()
{
return $this->belongsTo('Location::class');
}
}
class Location extends Model
{
public function reservations()
{
return $this->hasMany('Registration::class');
}
}
ive been stuck at this all day and i really dont know where to look anymore
The error you are getting is because of the wrong function name, you are calling location, while it is locations.
public function locations(){}
&
$location->location()->associate($request->location());
and you can pass the variable as a query parameter, you'll need to pass this data as an array in your blade file.
Web.php
Route::get('/somewhere/{id?}, function(){
//do something
})->name('test');
Blade
route('test', ['id' => $id]);
Controller Method
public function store(Request $request, $id) //Adding the query parameter for id passed in Route.
{
$location = new Reservation;
$location->name = $request->get('name');
$location->type = $request->get('type');
$location->location()->associate($id);
$location->save();
return redirect('/location');
}
Hello guys I want to have values from a different table but same database and print them on a dropdown, av tried several ways and here but i get this error
Call to undefined method Illuminate\Auth\SessionGuard::myVehicles() (View: /home/vagrant/www/martin/resources/views/templates/applications.blade.php)
I want to get them from a table containing all vehicles and print all the vehicles so that the user can select one of the vehicles in the database... here is vehicle model
<?php
namespace Martin\Models;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
class Vehicle extends Authenticatable
{
use Notifiable;
//
use Notifiable;
protected $guard="vehicle";
protected $table="vehicles";
protected $fillable=[
'id',
'vehicle_registration_number',
'vehicle_type',
'vehicle_size',
];
public function user(){
return $this->belongsTo('Martin\Models\User');
}
public function myVehicles(){
$vehicles = Martin\Models\Vehicle::all();
foreach ($vehicles as $vehicle) {
echo $vehicle->vehicle_registration_number."-".$vehicle->vehicle_type."-".$vehicle->vehicle_size.' seaters <br/>';
}
}
}
and the following is the dropdown i want to display my data in the applications.blade.php so that a user can select one of the vehicles...
<select name="vehicle_registration_number" class="form-control">
{{Auth::guard('vehicle')->myVehicles()}}
</select>
and also I may ask what name do you assign to the select box do you assign it the same name as the original name of the input i.e text area of the original one? kindly reply... if any more clarification is needed am ready... Thankyou!
First, you should use a controller to handle your models, rather than trying to handle a class from the class itself. If so, you need to create static methods.
In whatever controller you are calling that page, you can get all vehicles
public function page()
{
//whatever you are doing here
...
$vehicles = Martin\Models\Vehicle::get();
foreach ($vehicles as $vehicle) {
$vehicle->description = $vehicle->vehicle_registration_number ."-". $vehicle->vehicle_type ."-". $vehicle->vehicle_size .' seaters';
}
return view('view_name', compact('vehicles'));
}
Then in your view you loop through vehicles in your select
<select name="vehicle_registration_number" class="form-control">
<option>Select Vehicle</option><!--selected by default-->
#foreach($vehicles as $vehicle)
<option value="{{ $vehicle->vehicle_registration_number }}">
{{ $vehicle->description }}
</option>
#endforeach
</select>