Skip to content

Commit 989b09a

Browse files
committed
fix(list): make props reactive
fix #231
1 parent f22883d commit 989b09a

File tree

2 files changed

+34
-10
lines changed

2 files changed

+34
-10
lines changed

components/list/mdc-list-item.vue

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ export default {
3939
return this.mdcList && this.mdcList.interactive
4040
},
4141
hasSecondary () {
42-
return !!this.$slots['secondary']
42+
return this.$slots['secondary'] && (
43+
this.mdcList && this.mdcList.twoLine
44+
)
4345
},
4446
hasEndDetail () {
4547
return !!this.$slots['end-detail']
@@ -48,16 +50,38 @@ export default {
4850
return !!this.$slots['start-detail']
4951
}
5052
},
51-
mounted () {
52-
if (this.isInteractive) {
53-
this.ripple = new RippleBase(this)
54-
this.ripple.init()
53+
watch: {
54+
isInteractive (value) {
55+
if (value) {
56+
this.addRipple()
57+
} else {
58+
this.removeRipple()
59+
}
5560
}
5661
},
62+
mounted () {
63+
this.isInteractive && this.addRipple()
64+
},
5765
beforeDestroy () {
58-
this.ripple && this.ripple.destroy()
59-
this.ripple = null
66+
this.removeRipple()
67+
},
68+
methods: {
69+
addRipple () {
70+
if (!this.ripple) {
71+
let ripple = new RippleBase(this)
72+
ripple.init()
73+
this.ripple = ripple
74+
}
75+
},
76+
removeRipple () {
77+
if (this.ripple) {
78+
let ripple = this.ripple
79+
this.ripple = null
80+
ripple.destroy()
81+
}
82+
}
6083
}
84+
6185
}
6286
</script>
6387

components/list/mdc-list.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ export default {
1717
provide () {
1818
return { mdcList: this }
1919
},
20-
data () {
21-
return {
22-
classes: {
20+
computed: {
21+
classes () {
22+
return {
2323
'mdc-list--dense': this.dense,
2424
'mdc-list--avatar-list': this.avatarList,
2525
'mdc-list--two-line': this.twoLine,

0 commit comments

Comments
 (0)