fix #929 block repeat with component diffing

Author: yyx990803

src/directives/repeat.js

@@ -24,7 +24,7 @@ module.exports = {
     this.id = '__v_repeat_' + (++uid)
     // setup anchor nodes
     this.start = _.createAnchor('v-repeat-start')
-    this.end = _.createAnchor('v-repeat')
+    this.end = _.createAnchor('v-repeat-end')
     _.replace(this.el, this.end)
     _.before(this.start, this.end)
     // check if this is a block repeat
@@ -304,7 +304,7 @@ module.exports = {
           : targetPrev._blockEnd || targetPrev.$el
         : start
       if (vm._reused && !vm._staggerCb) {
-        currentPrev = findPrevVm(vm, start)
+        currentPrev = findPrevVm(vm, start, this.id)
         if (currentPrev !== targetPrev) {
           this.move(vm, prevEl)
         }
@@ -363,6 +363,8 @@ module.exports = {
       _host: this._host,
       // pre-compiled linker for simple repeats
       _linkFn: this._linkFn,
+      // identifier, shows that this vm belongs to this collection
+      _repeatId: this.id
     }, Ctor)
     // cache instance
     if (needCache) {
@@ -668,14 +670,20 @@ module.exports = {
  * leaving transition finishes, but its __vue__ reference
  * should have been removed so we can skip them.
  *
+ * If this is a block repeat, we want to make sure we only
+ * return vm that is bound to this v-repeat. (see #929)
+ *
  * @param {Vue} vm
  * @param {Comment|Text} anchor
  * @return {Vue}
  */
 
-function findPrevVm (vm, anchor) {
+function findPrevVm (vm, anchor, id) {
   var el = vm.$el.previousSibling
-  while (!el.__vue__ && el !== anchor) {
+  while (
+    (!el.__vue__ || el.__vue__.$options._repeatId !== id) &&
+    el !== anchor
+  ) {
     el = el.previousSibling
   }
   return el.__vue__
@@ -711,4 +719,4 @@ function toRefObject (vms) {
     ref[vms[i].$key] = vms[i]
   }
   return ref
-}
+}

src/util/misc.js

@@ -54,4 +54,4 @@ exports.createAnchor = function (content, persist) {
   return config.debug
     ? document.createComment(content)
     : document.createTextNode(persist ? ' ' : '')
-}
+}

test/unit/specs/directives/repeat_spec.js

@@ -311,7 +311,15 @@ if (_.inBrowser) {
       vm.list.reverse()
       _.nextTick(function () {
         assertMarkup()
-        done()
+        vm.list.splice(1, 1)
+        _.nextTick(function () {
+          assertMarkup()
+          vm.list.splice(1, 0, { a: 2 })
+          _.nextTick(function () {
+            assertMarkup()
+            done()
+          })
+        })
       })
 
       function assertMarkup () {
@@ -322,6 +330,47 @@ if (_.inBrowser) {
       }
     })
 
+    it('block repeat with component', function (done) {
+      var vm = new Vue({
+        el: el,
+        template: '<template v-repeat="list"><test a="{{a}}"></test></template>',
+        data: {
+          list: [
+            { a: 1 },
+            { a: 2 },
+            { a: 3 }
+          ]
+        },
+        components: {
+          test: {
+            props: ['a'],
+            template: '{{a}}'
+          }
+        }
+      })
+      assertMarkup()
+      vm.list.reverse()
+      _.nextTick(function () {
+        assertMarkup()
+        vm.list.splice(1, 1)
+        _.nextTick(function () {
+          assertMarkup()
+          vm.list.splice(1, 0, { a: 2 })
+          _.nextTick(function () {
+            assertMarkup()
+            done()
+          })
+        })
+      })
+
+      function assertMarkup () {
+        var markup = vm.list.map(function (item) {
+          return '<test>' + item.a + '</test>'
+        }).join('')
+        expect(el.innerHTML).toBe(markup)
+      }
+    })
+
     it('array filters', function (done) {
       var vm = new Vue({
         el: el,
@@ -957,4 +1006,4 @@ function assertObjectPrimitiveMutations (vm, el, done) {
     }).join('')
     expect(el.innerHTML).toBe(markup)
   }
-}
+}