70 lines
1.6 KiB
Plaintext
70 lines
1.6 KiB
Plaintext
|
<todo>
|
||
|
|
<h3>{ props.title }</h3>
|
||
|
|
<ul>
|
||
|
|
<li each={ item in state.items }>
|
||
|
|
<label class={ item.done ? 'completed' : null }>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={ item.done }
|
||
|
|
onclick={ () => toggle(item) } />
|
||
|
|
{ item.title }
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<form onsubmit={ add }>
|
||
|
|
<input oninput={ edit } />
|
||
|
|
<button disabled={ !state.text }>
|
||
|
|
Addddd #{ state.items.length + 1 }
|
||
|
|
</button>
|
||
|
|
<button disabled={ this.state.items.some(item => !item.done) } onclick={ clear }>Clear done</button>
|
||
|
|
<ul class="filters">
|
||
|
|
<li> <a href="#">All</a></li>
|
||
|
|
<li> <a href="#">Active</a></li>
|
||
|
|
<li> <a href="#">Done</a></li>
|
||
|
|
</ul>
|
||
|
|
</form>
|
||
|
|
<script>
|
||
|
|
export default function todos(){
|
||
|
|
return {
|
||
|
|
onBeforeMount(props, state) {
|
||
|
|
// initial state
|
||
|
|
this.state = {
|
||
|
|
items: props.items,
|
||
|
|
text: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
edit(e) {
|
||
|
|
// update only the text state
|
||
|
|
this.update({
|
||
|
|
text: e.target.value
|
||
|
|
})
|
||
|
|
},
|
||
|
|
clear(e) {
|
||
|
|
this.update({
|
||
|
|
items: this.state.items.filter(item => !item.done)
|
||
|
|
})
|
||
|
|
this.update()
|
||
|
|
},
|
||
|
|
add(e) {
|
||
|
|
e.preventDefault()
|
||
|
|
|
||
|
|
if (this.state.text) {
|
||
|
|
this.update({
|
||
|
|
items: [
|
||
|
|
...this.state.items,
|
||
|
|
// add a new item
|
||
|
|
{title: this.state.text}
|
||
|
|
],
|
||
|
|
text: ''
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toggle(item) {
|
||
|
|
item.done = !item.done
|
||
|
|
// trigger a component update
|
||
|
|
this.update()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</todo>
|