fix(list): make props reactive

fix #231
stasson · Jan 29, 2018 · bb6aeea · bb6aeea
1 parent 6da65cc
commit bb6aeea
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/components/list/mdc-list-item.vue b/components/list/mdc-list-item.vue
@@ -39,7 +39,9 @@ export default {
       return this.mdcList && this.mdcList.interactive
     },
     hasSecondary () {
-      return !!this.$slots['secondary']
+      return this.$slots['secondary'] && (
+        this.mdcList && this.mdcList.twoLine
+      ) 
     },
     hasEndDetail () {
       return !!this.$slots['end-detail']
@@ -48,16 +50,38 @@ export default {
       return !!this.$slots['start-detail']
     }
   },
-  mounted () {
-    if (this.isInteractive) {
-      this.ripple = new RippleBase(this)
-      this.ripple.init()
+  watch: {
+    isInteractive (value) {
+        if (value) {
+          this.addRipple() 
+        } else {
+          this.removeRipple()
+        }
     }
   },
+  mounted () {
+    this.isInteractive && this.addRipple()
+  },
   beforeDestroy () {
-    this.ripple && this.ripple.destroy()
-    this.ripple = null
+    this.removeRipple()
+  },
+  methods: {
+    addRipple () {
+      if (!this.ripple) {
+        let ripple = new RippleBase(this)
+        ripple.init()
+        this.ripple = ripple                 
+      } 
+    },
+    removeRipple () {
+      if (this.ripple) {
+        let ripple = this.ripple
+        this.ripple = null 
+        ripple.destroy()
+      }                
+    }
   }
+  
 }
 </script>
 
diff --git a/components/list/mdc-list.vue b/components/list/mdc-list.vue
@@ -17,9 +17,9 @@ export default {
   provide () {
     return { mdcList: this }
   },
-  data () {
-    return {
-      classes: {
+  computed: {
+    classes () {
+      return {
         'mdc-list--dense': this.dense,
         'mdc-list--avatar-list': this.avatarList,
         'mdc-list--two-line': this.twoLine,