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

MarkOP•2mo ago

I guess the field itself isn't a Livewire component.

Takashi•2mo 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

Gaming

Programming

How can I access component properties in view?