Closed eddyinet closed 3 years ago
OK I added: @stack('body_scripts')
to my index blade. Renders now.
Data isn't being populated just yet. In my livewire component I'm just initializing:
public $data = [1 => "First Option", 2 => "Second Option"];
What's in the view for that component? If you added my file to say 'resource/views/components/select-search.blade.php' you should use it in your Livewire component like this:
If you don't wire:model here you won't be able to get the selected option back out. I do not render an html
Ah yes, good point the body_scripts area was one of my own making. I'll update the documentation. Alternatively, I could just put it IN that component so you don't have to push it to a stack.
I just have this in my view:
<x-select-search :data="$data" wire:model="email" placeholder="Select something" />
I also noticed that the placeholder variable doesn't propagate over either. I know its on my end but I don't think any of the variables are getting passed over. I'm close though...
The livewire component:
namespace App\Http\Livewire;
use Livewire\Component;
class AddAppAdmin extends Component
{
public $data;
public $email;
public function mount()
{
$this->data = [1 => "First Option", 2 => "Second Option"];
}
public function render()
{
return view('livewire.add-app-admin');
}
}
Looks like the data is getting through:
Oh, do you have Alpine.JS on your page? This does depend on alpine.js either added via NPM or by slapping
<script @.***/dist/alpine.min.js" defer>
in your layout
On Fri, Mar 12, 2021 at 2:09 PM eddyinet @.***> wrote:
Looks like the data is getting through:
[image: 1] https://user-images.githubusercontent.com/8219203/110987026-7d654f80-833c-11eb-9ae0-fedb7cddcee7.png
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/presleyd/alpinejs-select/issues/2#issuecomment-797692665, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACY6IXGP7PYVPE3YVYEWVXLTDJKFTANCNFSM4ZCYIK6Q .
I do. I use it elsewhere as well so it's loaded:
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
@stack('body_scripts')
So there are no console errors but the select list is empty?
On Fri, Mar 12, 2021 at 2:15 PM eddyinet @.***> wrote:
I do. I use it elsewhere as well so it's loaded:
<script @.***/dist/alpine.js" defer> @stack('body_scripts')
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/presleyd/alpinejs-select/issues/2#issuecomment-797696117, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACY6IXEPU2MS6KGXUU7OHALTDJK45ANCNFSM4ZCYIK6Q .
Exactly. I just updated to the latest Alpine no luck.
Heads up on your last commit to maybe inline the SVG's?
Unable to locate a class or view for component [icon.x]
Fixed! I guess I need to keep my copy broken out if I'm going to share this thing :)
On Fri, Mar 12, 2021 at 2:24 PM eddyinet @.***> wrote:
Heads up on your last commit to maybe inline the SVG's?
Unable to locate a class or view for component [icon.x]
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/presleyd/alpinejs-select/issues/2#issuecomment-797702018, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACY6IXF6ZSQ5RIROEAA66CTTDJL6FANCNFSM4ZCYIK6Q .
Think I got it.
Added following to app\View\Components\SelectSearch.php (created when using php artisan make:component SelectSearch
)
Note I had to change data
to values
since data is a reserved keyword in blade components. Will follow-up with any tweaks but working well for now. Thanks for this and sticking with me :)
namespace App\View\Components;
use Illuminate\View\Component;
class SelectSearch extends Component
{
public $values;
public $limit;
public $placeholder;
public function __construct($values, $limit, $placeholder)
{
$this->values = $values;
$this->limit = $limit;
$this->placeholder = $placeholder;
}
public function render()
{
return view('components.select-search');
}
}
This looks fantastic! While attempting to integrate it was getting errors about the data prop so I created a new Laravel component using
php artisan make:component SelectSearch
So that the SelectSearch.php component file is created:
` namespace App\View\Components;
use Illuminate\View\Component;
class SelectSearch extends Component { public $data;
} `
Once this was done I was able to render the component but now the console comes back with:
Can't find variable: AlpineSelect
I'm assuming I wasn't supposed to create the component that way... thoughts on what I missed?
Thanks!