Using #each blocks with early defined variables (in data)

App.html

<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("todos", newTodo)'>add todo</button>

<ul>
	{{#each todos as todo, i}}
		<li>
			<button on:click='splice("todos", i, 1)'>x</button>
			{{todo}}
		</li>
	{{/each}}
</ul>

<style>
	ul {
		list-style: none;
		padding: 0;
	}
	li button {
		color: rgb(200,0,0);
		background: rgba(200,0,0,0.1);
		border-color: rgba(200,0,0,0.2);
		padding: 0.2em 0.5em;
	}
</style>

<script>
	import { push, splice } from 'svelte-extras';
	
	export default {
		data: function () {
			return {
				newTodo: '',
				todos: []
			};
		},
		methods: {
			push,
			splice
		}
	};
</script>