03 - Events

Add a button. When it is clicked, the event expression changes draft. The result stays visible on the page.

Code

<script src="/sercrod.js"></script>

<serc-rod data='{"draft":"Buy milk","todos":[]}'>
	<h2>Todo</h2>
	<p>Draft: %draft%</p>
	<button type="button" @click="draft = 'Buy coffee'">
		Use sample title
	</button>
</serc-rod>

How to read the event

@click runs when the button is clicked.
draft = 'Buy coffee' assigns a new value.
The interpolation %draft% shows the updated value.

Result

Todo Draft: %draft%

Click the button and the visible draft changes. The next chapter will make that value editable with an input.

The next step will replace the fixed draft text with a real input.

Previous: Data and output

Next: Forms

Back to Tutorial index