59 lines
1.1 KiB
Plaintext
59 lines
1.1 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 }>
|
||
|
|
Add #{ state.items.length + 1 }
|
||
|
|
</button>
|
||
|
|
<button 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 {
|
||
|
|
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) {
|
||
|
|
// COMPLETEZ
|
||
|
|
},
|
||
|
|
add(e) {
|
||
|
|
// COMPLETEZ
|
||
|
|
this.idem.push(e)
|
||
|
|
this.update({items: this.items })
|
||
|
|
},
|
||
|
|
toggle(item) {
|
||
|
|
item.done = !item.done
|
||
|
|
// trigger a component update
|
||
|
|
this.update()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</todo>
|