Closed lucas-davi closed 3 weeks ago
It does not happen here https://mary-ui.com/docs/components/choices#searchable-frontend
If I create the options in the .blade file it works, but if I create the options in a component it returns the error.
in component:
public array $o;
$this->o = ModelsEditor::get()->toArray();
in blade
<x-choices-offline label="Single" wire:model="name" :options="$o" single />
Can you share full code?
component Editor
<?php
namespace App\Livewire;
use App\Models\Editor as ModelsEditor;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Collection;
use Livewire\Attributes\On;
use Livewire\Component;
class Editor extends Component
{
public bool $modal = false;
public string $description = '';
public string $name = '';
public ?ModelsEditor $editor;
public array $o;
public function render(): View
{
return view('livewire.editor');
}
#[On('show-modal')]
public function open(): void
{
$this->editor = ModelsEditor::find(1);
$this->description = $this->editor->description;
$this->o = ModelsEditor::get()->toArray();
$this->modal = true;
}
public function save()
{
$this->editor->update([
'description' => $this->description
]);
$this->modal = false;
}
}
view editor
<div>
<x-modal wire:model="modal" class="backdrop-blur">
<form wire:submit="save">
<x-editor wire:model="description" label="Description" />
<div class="divider"></div>
<x-choices-offline label="Single" wire:model="name" :options="$o" single />
<button type="submit">Save</button>
<x-button label="Cancel" @click="$wire.modal = false" class="mt-6" />
</form>
</x-modal>
</div>
another thing, don't you think it's interesting that choices also accept eloquent collection?
<?php
namespace App\Livewire;
use App\Models\Editor as ModelsEditor;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Attributes\On;
use Livewire\Component;
class Editor extends Component
{
public bool $modal = false;
public string $description = '';
public string $name = '';
public ?ModelsEditor $editor;
public Collection $o;
public function render(): View
{
return view('livewire.editor');
}
#[On('show-modal')]
public function open(): void
{
$this->editor = ModelsEditor::find(1);
$this->description = $this->editor->description;
$this->o = ModelsEditor::take(5)->get();
$this->modal = true;
}
public function save()
{
$this->editor->update([
'description' => $this->description
]);
$this->modal = false;
}
}
returns the error:
The error says “null given”.
property $o value
This is the same problem I posted here https://github.com/robsontenorio/mary/issues/560 , but was not resolved. The same code works with x-choices but not with x-choices-offline
Because of wire:ignore inside editor:
public Collection $o;
public function mount() { $this->editor = ModelsEditor::find(1); $this->description = $this->editor->description; $this->o = collect(); }
#[On('show-modal')]
public function open(): void
{
$this->o = ModelsEditor::query()->get();
$this->modal = true;
}
I have this Macro, can you test?
ex: ModelsEditor::query()->pluckWithIdName('id', 'name');
AppServiceProvider:
Builder::macro('pluckWithIdName', function ($idColumn = null, $nameColumn = null): Collection {
return $this->pluck($nameColumn, $idColumn)->map(fn ($value, $id) => ['id' => $id, 'name' => $value])->values();
});
I added the macro and the mount method, but the result is the same.
observation: doing the query in the blade file, it works
@php
$os = App\Models\Editor::query()->get();
@endphp
<x-modal wire:model="modal" class="backdrop-blur">
<form wire:submit="save">
<x-editor wire:model="description" label="Description" />
<div class="divider"></div>
<x-choices-offline label="Single" wire:model="name" :options="$os" single />
<button type="submit">Save</button>
<x-button label="Cancel" @click="$wire.modal = false" class="mt-6" />
</form>
</x-modal>
https://discord.gg/c2Dv8T2X2s MaryUi Discord, (se quiser ajuda posso te ajudar por lá)
i joined discord
Please , let us know what was the solution.
maryUI version
1.35.6
daisyUI version
4.12.10
Livewire version
3.5.6
What browsers are affected?
Chrome
What happened?
after selecting offline option, i get the following error in console:
and option selected not show in input: