How to get the selected option in data-wp-each

[webconstructor]

I want to trigger an action on the value of a selected option but it's unclear how to retrieve that value in the store.
render.php:

$years                    = range( 2024, 2019 );
?>
<div data-wp-interactive="exchangerate" data-wp-init="state.init" <?= wp_interactivity_data_wp_context(	array('years' => $years ));?>>
		<select data-wp-on--change="actions.setYear">
			<template data-wp-each="context.years">
				<option data-wp-bind--value="context.item" data-wp-text="context.item"></option>
			</template>
		</select>
</div>

view.js

import { store, getContext, getElement } from '@wordpress/interactivity';

const { state } = store( 'exchangerate', {
	state: {
		get selected() {
			return [ getElement().attributes.children, getElement().option ];
		},
	},
	actions: {
		setMonth: () => {
			const context = getContext();
			const el = getElement();
			console.log( el, context, state.selected );
		},
	},
} );

I cannot find any usefull string to pull on...

Can someone show me the way to do this?

[narenin]

Hi @webconstructor

As I can from the code you have used actions.setYear in the code while there is not action define in the JS file, so could you please try to replace with with actions.setMonth because that is only action I found in your code.

[sirreal]

The bound function is an event handler, so I'd use the event to access the target element and read its value:

{
  setYear: ( event ) => {
    console.log( event.target.value ); // "2024"
  },
}

(The example you shared mixes setYear and setMonth function names, I'll assume that's a typo and not the issue.)

[webconstructor]

Great!
This works & indeed did I skip the wrong part of the code
Thx sirreal;