<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() {
return {
newTodo: '',
todos: []
};
},
methods: {
push,
xxxxxxxxxx
{
todos: [
"wash the car",
"take the dog for a walk",
"mow the lawn"
]
}