64 lines
1.1 KiB
Plaintext
64 lines
1.1 KiB
Plaintext
|
<todo>
|
||
|
|
<h3>{ props.title }</h3>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li each={ todo in state.todos } key = {todo.id}>
|
||
|
|
<label class={ todo.done ? 'completed' : '' }>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked = { todo.done }
|
||
|
|
onclick = { () => toggle(todo) } />
|
||
|
|
{ todo.title }
|
||
|
|
</label>
|
||
|
|
<span class="destroy" onclick={() => remove(todo)}></span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<form onsubmit={ add }>
|
||
|
|
<input oninput={ edit } />
|
||
|
|
<button disabled={ !state.text }>
|
||
|
|
Add #{ state.todos.length + 1 }
|
||
|
|
</button>
|
||
|
|
<button onclick={ clear }>Clear done</button>
|
||
|
|
<ul class="filters">
|
||
|
|
<li><span>0 todos left</span> </li>
|
||
|
|
<li> <a href="#"> All</a></li>
|
||
|
|
<li> <a href="#">Active</a></li>
|
||
|
|
<li> <a href="#">Done</a></li>
|
||
|
|
</ul>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
onBeforeMount(props, state) {
|
||
|
|
// initial state
|
||
|
|
this.state = {
|
||
|
|
todos: props.todos,
|
||
|
|
text: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
edit(e) {
|
||
|
|
// update only the text state
|
||
|
|
this.update({
|
||
|
|
text: e.target.value
|
||
|
|
})
|
||
|
|
},
|
||
|
|
clear(e) {
|
||
|
|
// TODO
|
||
|
|
|
||
|
|
},
|
||
|
|
add(e) {
|
||
|
|
// TODO
|
||
|
|
},
|
||
|
|
toggle(todo) {
|
||
|
|
todo.done = !todo.done
|
||
|
|
this.update()
|
||
|
|
},
|
||
|
|
remove(todo){
|
||
|
|
// TODO
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</todo>
|