How to use Alpine in Filament?
If I have this very basic example:
MyPage.php
my-page.blade.php
I can't understand how I can access the field state from alpine...
What if I want to change the state of
MyPage.php
namespace App\Filament\Pages;
class MyPage extends Page implements HasForms
{
use InteractsWithForms;
public string $my_text_input = 'Hello, World!';
public string $another_text_input = 'How are you?';
public function form(Form $form): Form
{
return $form
->schema([
TextInput::make('my_text_input'),
TextInput::make('another_text_input'),
]);
}
}namespace App\Filament\Pages;
class MyPage extends Page implements HasForms
{
use InteractsWithForms;
public string $my_text_input = 'Hello, World!';
public string $another_text_input = 'How are you?';
public function form(Form $form): Form
{
return $form
->schema([
TextInput::make('my_text_input'),
TextInput::make('another_text_input'),
]);
}
}my-page.blade.php
<x-filament-panels::page>
<script>
document.addEventListener('alpine:init', () => {
console.log('Alpine initialized'); // It works
Alpine.data('my_text_input', ({ state }) => ({
state,
init() {
console.log(this.state) // Doesn't work
},
onclick() {
console.log(this.state) // Doesn't work
},
change() {
console.log(this.state) // Doesn't work
},
})
</script>
{{ $this->form }}
</x-filament-panels::page><x-filament-panels::page>
<script>
document.addEventListener('alpine:init', () => {
console.log('Alpine initialized'); // It works
Alpine.data('my_text_input', ({ state }) => ({
state,
init() {
console.log(this.state) // Doesn't work
},
onclick() {
console.log(this.state) // Doesn't work
},
change() {
console.log(this.state) // Doesn't work
},
})
</script>
{{ $this->form }}
</x-filament-panels::page>I can't understand how I can access the field state from alpine...
What if I want to change the state of
another_text_inputanother_text_input each time my_text_inputmy_text_input state changes, for example?