F
Filament2w ago
Mark

How can I access component properties in view?

I'm trying to create a custom field using the following code:
<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class SelectWithPivot extends Field
{
protected string $view = 'forms.components.select-with-pivot';

public ?int $selectedItem = null;

protected function setUp(): void
{
parent::setUp();

$this->afterStateHydrated(function (self $component, ?array $state) {
if (blank($state)) {
$component->state(['test' => 1]);
}
});
}

public function updatedSelectedItem()
{
dd($this->selectedItem);
}
}
<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class SelectWithPivot extends Field
{
protected string $view = 'forms.components.select-with-pivot';

public ?int $selectedItem = null;

protected function setUp(): void
{
parent::setUp();

$this->afterStateHydrated(function (self $component, ?array $state) {
if (blank($state)) {
$component->state(['test' => 1]);
}
});
}

public function updatedSelectedItem()
{
dd($this->selectedItem);
}
}
Now I want to use the $selectedItem property in my blade (wire:model):
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
{{ json_encode($getState()) }}
<div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
<select wire:model="selectedItem">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</x-dynamic-component>
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
{{ json_encode($getState()) }}
<div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
<select wire:model="selectedItem">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</x-dynamic-component>
But I get this error: Livewire: [wire:model="selectedItem"] property does not exist on component: [app.domains.relations.filament.resources.relation-resrouce.relation-managers.packages-relation-manager] What am I doing wrong? It seems the view is looking at the parent component or something?
2 Replies
Mark
MarkOP2w ago
I guess the field itself isn't a Livewire component.
Takashi
Takashi2w ago
The main issue is that wire:model='selectedItem' is looking for a property on the Livewire component, but selectedItem exists in your Filament field class, which Livewire doesn't recognize. If you want, I can give you more detailed soulution
Want results from more Discord servers?
Add your server