Using alpine to update a Form Field using an x-on event listener.

I feel like I'm missing something simple. If I have two form fields and want to use alpine to update another field 'on change', how can I do this? I want the interaction to be instant, without the roundtrip form the server (or at least to happen at the same time so it feels instant).

Clearly I cannot x-model here as it doesn't work or I'm setting the value incorrectly.

Select::make('employee_selector')
  ->label('Select an employee')
  ->options($employees = $this->location()?->currentEmployees()->pluck('name', 'id')->toArray() ?: [])
  ->extraAttributes([
    'x-data' => '{ selectedId: null }',
    'x-model' => 'selectedId',
    'x-on:new-employee-id.window' => 'selectedId = $event.detail.newId; console.log("updated to " + $event.detail.newId);',
  ]),

Select::make('employee_selector')
  ->label('Select an employee')
  ->options($employees = $this->location()?->currentEmployees()->pluck('name', 'id')->toArray() ?: [])
  ->extraAttributes([
    'x-data' => '{ selectedId: null }',
    'x-model' => 'selectedId',
    'x-on:new-employee-id.window' => 'selectedId = $event.detail.newId; console.log("updated to " + $event.detail.newId);',
  ]),

The event is firing properly, I can see my console logs fill properly:

$dispatch('new-employee-id', { newId: state })

$dispatch('new-employee-id', { newId: state })

I think it is just where I'm trying to set the value is incorrect and where I need some pointers please.

selectedId = $event.detail.newId;

selectedId = $event.detail.newId;

Using alpine to update a Form Field using an x-on event listener.

Select::make('employee_selector')
  ->label('Select an employee')
  ->options($employees = $this->location()?->currentEmployees()->pluck('name', 'id')->toArray() ?: [])
  ->extraAttributes([
    'x-data' => '{ selectedId: null }',
    'x-model' => 'selectedId',
    'x-on:new-employee-id.window' => 'selectedId = $event.detail.newId; console.log("updated to " + $event.detail.newId);',
  ]),

Select::make('employee_selector')
  ->label('Select an employee')
  ->options($employees = $this->location()?->currentEmployees()->pluck('name', 'id')->toArray() ?: [])
  ->extraAttributes([
    'x-data' => '{ selectedId: null }',
    'x-model' => 'selectedId',
    'x-on:new-employee-id.window' => 'selectedId = $event.detail.newId; console.log("updated to " + $event.detail.newId);',
  ]),

The event is firing properly, I can see my console logs fill properly:

$dispatch('new-employee-id', { newId: state })

$dispatch('new-employee-id', { newId: state })

I think it is just where I'm trying to set the value is incorrect and where I need some pointers please.

selectedId = $event.detail.newId;

selectedId = $event.detail.newId;

Using alpine to update a Form Field using an x-on event listener.

Similar Threads

Using alpine to update a Form Field using an x-on event listener.

Similar Threads

Similar Threads

Similar Threads