Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Riot component with all the basics
<my-todos>
<p>Todo count: {state.todos.length}</p>
<input ref="newTodo" type="text">
<button onclick="{add}">Add</button>
<ul if="{state.todos.length}">
<li each="{(todo, i) in state.todos}" key="{i}">{todo} <button onclick="{e => remove(i)}">Remove</button></li>
</ul>
<script>
export default {
// Lifecycle methods: https://riot.js.org/api/#lifecycle
state: {
todos: []
},
add(e) {
const todo = this.$('[ref="newTodo"]').value;
this.state.todos.push(todo);
this.update();
},
remove(i) {
this.state.todos.splice(i, 1);
this.update();
}
}
</script>
<style>
ul { list-style: none }
</style>
</my-todos>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment