F
Filament•5mo ago
oxodesign

Custom form field, how to change the state from x-init?

I have following component and want to change the state from inside the function? 
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <input x-model="state" x-ref="test_input" x-init="await doSomething();" />
    </div>

    <script>
        async function doSomething() {
            // How can I change the state from inside here?
        }
    </script>
</x-dynamic-component>
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <input x-model="state" x-ref="test_input" x-init="await doSomething();" />
    </div>

    <script>
        async function doSomething() {
            // How can I change the state from inside here?
        }
    </script>
</x-dynamic-component>
Thanks in advance
1 Reply
LeandroFerreira
LeandroFerreira•5mo ago
<div x-data="{
    state: $wire.$entangle('{{ $getStatePath() }}'),
    doSomething() {
        this.state = 'something';
    }
}" x-init="doSomething">
    <input x-model="state" />
</div>
<div x-data="{
    state: $wire.$entangle('{{ $getStatePath() }}'),
    doSomething() {
        this.state = 'something';
    }
}" x-init="doSomething">
    <input x-model="state" />
</div>

Did you find this page helpful?