Fixes

docs-src/src/App.vue

@@ -109,7 +109,7 @@ export default {
     generateItems () {
       console.log('Generating ' + this.count + ' items...')
       let time = Date.now()
-      const items = Object.freeze(getData(this.count, this.enableLetters))
+      const items = getData(this.count, this.enableLetters)
       this._time = Date.now()
       this.generateTime = this._time - time
       console.log('Generated ' + items.length + ' in ' + this.generateTime + 'ms')
@@ -207,12 +207,7 @@ body {
 .letter {
   text-transform: uppercase;
   color: grey;
-  font-weight: lighter;
-  height: 200px;
-}
-
-.letter .value {
-  font-size: 120px;
+  font-weight: bold;
 }
 
 .index {

docs-src/src/Letter.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr class="letter">
+  <tr class="letter" :class="{ big: big }" @click="toggle">
     <td class="index">
       {{item.index}}
     </td>
@@ -12,5 +12,28 @@
 <script>
 export default {
   props: ['item'],
+
+  computed: {
+    big () {
+      return this.item.height === 200
+    },
+  },
+
+  methods: {
+    toggle () {
+      this.item.height = this.big ? 42 : 200
+    },
+  },
 }
 </script>
+
+<style scoped>
+.letter.big {
+  font-weight: normal;
+  height: 200px;
+}
+
+.letter.big .value {
+  font-size: 120px;
+}
+</style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-virtual-scroller",
   "description": "Smooth scrolling for any amount of data",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "author": {
     "name": "Guillaume Chau",
     "email": "[email protected]"

src/components/VirtualScroller.vue

@@ -104,25 +104,30 @@ export default {
     },
 
     heights () {
-      const heights = {}
-      const items = this.items
-      const field = this.heightField
-      let accumulator = 0
-      for (let i = 0; i < items.length; i++) {
-        accumulator += items[i][field]
-        heights[i] = accumulator
+      if (this.itemHeight === null) {
+        const heights = {}
+        const items = this.items
+        const field = this.heightField
+        let accumulator = 0
+        for (let i = 0; i < items.length; i++) {
+          accumulator += items[i][field]
+          heights[i] = accumulator
+        }
+        return heights
       }
-      return heights
     },
   },
 
   watch: {
-    items () {
-      this.updateVisibleItems()
+    items: {
+      handler () {
+        this.updateVisibleItems(true)
+      },
+      deep: true,
     },
     pageMode () {
       this.applyPageMode()
-      this.updateVisibleItems()
+      this.updateVisibleItems(true)
     },
   },
 
@@ -160,7 +165,7 @@ export default {
       }
     },
 
-    updateVisibleItems () {
+    updateVisibleItems (force = false) {
       const l = this.items.length
       const scroll = this.getScroll()
       const items = this.items
@@ -224,10 +229,11 @@ export default {
           containerHeight = l * itemHeight
         }
 
-        if (startIndex !== this._startIndex || endIndex !== this._endIndex) {
+        if (force || startIndex !== this._startIndex || endIndex !== this._endIndex || l !== this._length) {
           this.keysEnabled = !(startIndex > this._endIndex || endIndex < this._startIndex)
           this._startIndex = startIndex
           this._endIndex = endIndex
+          this._length = l
           this.visibleItems = items.slice(startIndex, endIndex)
           this.itemContainerStyle = {
             height: containerHeight + 'px',
@@ -275,8 +281,8 @@ export default {
   },
 
   mounted () {
-    this.updateVisibleItems()
     this.applyPageMode()
+    this.updateVisibleItems()
   },
 
   beforeDestroy () {