commit | author | age
|
a34f1d
|
1 |
<template> |
D |
2 |
<div> |
|
3 |
<md-list-item |
|
4 |
@click="markDone" |
|
5 |
> |
|
6 |
<md-checkbox :value="isActive" /> |
875958
|
7 |
<span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.title }}</span> |
a34f1d
|
8 |
</md-list-item> |
D |
9 |
</div> |
|
10 |
</template> |
|
11 |
<script> |
|
12 |
export default { |
|
13 |
name: "TodoItem", |
|
14 |
props: { |
|
15 |
// type any object ;) |
|
16 |
todoItem: {} |
|
17 |
}, |
|
18 |
data () { |
|
19 |
return { |
|
20 |
isActive: false |
|
21 |
} |
|
22 |
}, |
|
23 |
methods: { |
|
24 |
markDone () { |
|
25 |
// set to greyed out / true false |
|
26 |
this.isActive = !this.isActive; |
|
27 |
console.info('INFO - ', this.todoItem , this.isActive) |
|
28 |
} |
|
29 |
} |
|
30 |
}; |
|
31 |
</script> |
|
32 |
|
|
33 |
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
34 |
<style scoped lang="scss"> |
|
35 |
.md-list { |
|
36 |
width: 320px; |
|
37 |
max-width: 100%; |
|
38 |
height: 400px; |
|
39 |
display: inline-block; |
|
40 |
overflow: auto; |
|
41 |
border: 1px solid rgba(#000, .12); |
|
42 |
vertical-align: top; |
|
43 |
} |
|
44 |
|
|
45 |
.strike-through { |
|
46 |
text-decoration: line-through; |
|
47 |
} |
|
48 |
</style> |