presleyd / alpinejs-select Goto Github PK

Hi,

I'm new to Alpine.

Where do I put the blade?

I tried running php artisan livewire:make RandomComponent and it seems the default locations for x-directives doesn't work.

The actual error I'm getting

Unable to locate a class or view for component [select-search].

Please help a noob.

Hi presleyd, I'm trying to use this component but when sending the data it doesn't display correctly, do you have any idea what the problem is?

Thank you very much first of all for the very helpful tool.

Unfortunately, when I try to display it in a modal, it does not work.

What could be the reason for that?

Thank you, this is amazing and exactly what I've been looking for.

I have come across one problem when using multiple I see this error

app.js:647 Uncaught TypeError: items.forEach is not a function
    at handleForDirective (app.js:647)
    at app.js:1837
    at Array.forEach (<anonymous>)
    at Component.resolveBoundAttributes (app.js:1797)
    at Component.initializeElement (app.js:1722)
    at app.js:1706
    at app.js:1696
    at walk (app.js:184)
    at walk (app.js:188)
    at walk (app.js:188)

This is my view:

<x-select-search :data="$contacts->mapWithKeys(function ($item) { return [$item['id'] => $item['full_name']]; })" wire:model="contactId" multiple />

this is my

my class:

<?php

namespace App\Http\Livewire;

use Illuminate\Contracts\View\View;
use Modules\Contacts\Models\Contact;

class Dashboard extends Base
{
    public string $contactId = '';

    public function render(): View
    {
        $contacts = Contact::get();

        return view('livewire.dashboard', compact('contacts'));
    }
}

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;

public function __construct($data)
{
    $this->data = $data;
}

public function render()
{
    return view('components.select-search');
}

}
`

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!

You should add to the readme on how to use a collection.

:data="$users->mapWithKeys(function ($item) { return [$item['id'] => $item['name']]; })"

@presleyd Hello!

I'm sorry to have to distract you from your daily important business, but I'm completely desperate to solve my problem.

I use several AlpineSelect on the page. After selecting in the first one, I try to update the list of options in the second one. I am successfully updating the data array using the livewire component, but they are not updated for my second Select.

The problem has something to do with selected. I get the feeling that they are in conflict.

If you have an understanding of why this is happening, please help.

Hi when I need to add two or more select components I get an error. Is it possible to add more select components to the site?

app.js:1666 Uncaught TypeError: Cannot read properties of null (reading 'length')

How can you use onchange event with is ? something like this
<x-list :data="$clients" @change="assignValue($event.target.value)" multiple/>

Hi @presleyd

I use your component as filter to search through objects.
If i select something the values get transmitted and the filter gets applied.

Now if i remove the selected values the new array gets also transmitted to livewire but on the last item it does not.

am i doing something wrong?

Best regards
Mario

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;

public function __construct($data)
{
    $this->data = $data;
}

public function render()
{
    return view('components.select-search');
}

}`

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!

i have made a dropdown of projects with this select components, but i have an input up top that adds a projects in case you want to create a new one , so upon creation i want to refresh the data so the dropdoown would have the new project that i just created without having to refresh the page

Trying to avoid using Select2, so I'm investigating this as a possible option. I'm assuming this isn't intentional and I'm doing something wrong but on my dropdowns the first item in the array is always highlighted (but not actually selected). If I select it it shows up as selected and the model data is updated but if I unselect it that first item in the list is still highlighted as though it was. Strange. I'm not super familiar with Livewire or Alpine, still trying to get to grips with them. If I change the Alpine code to have an option by default selected if it's null by default that shows up as selected in the list but again so does the first item in the list (just not as a bubble icon you can click off the input box).

I am using this component with pure laravel without livewire, I want to get the selected value of item when submitting the form

I am trying to pass different data based on user select like
<x-select-search :data="$type == 'main' ? $mainData : $otherData" wire:model="mydata" placeholder="Select data!" /> but it showing the error

SupportAlpine.js:127 Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
--- property 'defer' closes the circle
at JSON.stringify ()

if I didn't have to change the :data then it's working fine.