Level 50
I think the livewire is much easier than Alpine js ( Actually, I Did not work on it and have much experience on Livewire )
You should try using Livewire
Aug 14, 2022
7
Level 5
Alpine Js - dropdown with data from livewire
I am very new to Alpine JS.
I need to create a form where the user can click on a button that will create form fields.
e.g. when the user clicks the button it will add these fields to the form:
Select field: (with data from bags table) Empty Input field for Price Empty Input field for Stock
so the user will be able to add as many of these as he wants.
I found this code example:
https://codepen.io/sanjayojha/pen/qBONdVm
but this example only creates empty fields, and I don't know if it's possible to create the dropdown using data from a model coming from Livewire component?
I tried to find a tutorial or example but could not find anything.
Level 51
Yes you can. You can access Livewire component properties using $wire. I created that jsFiddle as an example. I created $wire manually, but that should be available in your Livewire component.
However, you can create an array on the Livewire component and a method to add an element to add, that way you will the array isn't going to created on the server and you will need an request for add or removing an element. That shouldn't be a problem if you have small app.
1 like
Level 5
@MohamedTammam Thank you very much.
I hope you wouldn't mind giving me a bit more help.
I'm not so good with javascript.... still learning.
I can't understand how to actually read the collection from the livewire.
I have this code in the Livewire:
$this->bags = Bag::distinct()->get(['weight']);
And in my blade:
<td><select x-model="field.option" class="form-control">
<template x-for="color in $wire.bags">
<option x-text="color"></option>
</template>
</select></td>
<td>
<span x-text="field.txt1"></span> <span x-text="field.option"></span>
</td>
This gives me a blank dropdown.
I tried:
$this->bags = Bag::distinct()->get(['weight'])->toJson();
result: [{"weight":0.25},{"weight":1}]
This gives me [ in the dropdown
I tried:
$this->bags = Bag::distinct()->get(['weight'])->toArray();
This gives me [object object]
Thank you
Level 51
@SigalZ Change it to
$this->bags = Bag::distinct()->get(['weight'])->pluck('weight');
1 like
Level 5
@MohamedTammam Thank you very much.
I'm sorry, I just realized I need more help.
In this bags table I have 2 fields: weight, color
I need to display another dropdown that will come from this collection:
$bags = Bag::orderBy('weight')->get();
On this one I will have to display 2 fields from the model, in the option's text, e.g.:
Color/WeightAlso, I have an accessor on this model, so to display the weight, I have this in the model:
protected function weightText(): Attribute
{
return new Attribute(
get: fn () => $this->weight < 1 ? $this->weight * 1000 . 'g' : $this->weight . 'kg'
);
}
So I think I will need to manually create arrays for both collections to display the weight correctly.
Can you help me on how to create these arrays for Alpine?
Level 51
@SigalZ Create 2 arrays, and use them the same way you we did in the first one.
1 like
Level 5
@MohamedTammam Lovely, thank you so much for all your help.
1 like
Please or to participate in this conversation.