fix v-repeat dom manipulation for block instances (fix #799)

yyx990803 · yyx990803 · commit 88c38ce86b67 · 2015-04-20T23:10:32.000-04:00
diff --git a/src/directives/repeat.js b/src/directives/repeat.js
@@ -309,17 +309,20 @@ module.exports = {
           vm.$before(ref)
         }
       } else {
+        // make sure to insert before the comment node if
+        // the vms are block instances
+        var nextEl = targetNext._blockStart || targetNext.$el
         if (vm._reused) {
           // this is the vm we are actually in front of
           currentNext = findNextVm(vm, ref)
           // we only need to move if we are not in the right
           // place already.
           if (currentNext !== targetNext) {
-            vm.$before(targetNext.$el, null, false)
+            vm.$before(nextEl, null, false)
           }
         } else {
           // new instance, insert to existing next
-          vm.$before(targetNext.$el)
+          vm.$before(nextEl)
         }
       }
       vm._new = false
diff --git a/test/unit/specs/directives/repeat_spec.js b/test/unit/specs/directives/repeat_spec.js
@@ -314,7 +314,7 @@ if (_.inBrowser) {
       expect(el.innerHTML).toBe('<div>AAA</div><div>BBB</div><div>CCC</div><!--v-repeat-->')
     })
 
-    it('block repeat', function () {
+    it('block repeat', function (done) {
       var vm = new Vue({
         el: el,
         template: '<template v-repeat="list"><p>{{a}}</p><p>{{a + 1}}</p></template>',
@@ -326,10 +326,52 @@ if (_.inBrowser) {
           ]
         }
       })
-      var markup = vm.list.map(function (item) {
-        return '<!--v-start--><p>' + item.a + '</p><p>' + (item.a + 1) + '</p><!--v-end-->'
-      }).join('')
-      expect(el.innerHTML).toBe(markup + '<!--v-repeat-->')
+      assertMarkup()
+      vm.list.reverse()
+      _.nextTick(function () {
+        assertMarkup()
+        done()
+      })
+
+      function assertMarkup () {
+        var markup = vm.list.map(function (item) {
+          return '<!--v-start--><p>' + item.a + '</p><p>' + (item.a + 1) + '</p><!--v-end-->'
+        }).join('')
+        expect(el.innerHTML).toBe(markup + '<!--v-repeat-->')
+      }
+    })
+
+    // added for #799
+    it('block repeat with diff', function (done) {
+      var vm = new Vue({
+        el: el,
+        template: '<template v-repeat="list" v-component="test"></template>',
+        data: {
+          list: [
+            { a: 1 },
+            { a: 2 },
+            { a: 3 }
+          ]
+        },
+        components: {
+          test: {
+            template: '<p>{{a}}</p><p>{{a + 1}}</p>'
+          }
+        }
+      })
+      assertMarkup()
+      vm.list.reverse()
+      _.nextTick(function () {
+        assertMarkup()
+        done()
+      })
+
+      function assertMarkup () {
+        var markup = vm.list.map(function (item) {
+          return '<!--v-start--><p>' + item.a + '</p><p>' + (item.a + 1) + '</p><!--v-end-->'
+        }).join('')
+        expect(el.innerHTML).toBe(markup + '<!--v-repeat-->')
+      }
     })
 
     it('component + parent directive + transclusion', function (done) {

Original file line number	Diff line number	Diff line change
`@@ -309,17 +309,20 @@ module.exports = {`
`309`	`309`	`vm.$before(ref)`
`310`	`310`	`}`
`311`	`311`	`} else {`
	`312`	`+ // make sure to insert before the comment node if`
	`313`	`+ // the vms are block instances`
	`314`	`+ var nextEl = targetNext._blockStart \|\| targetNext.$el`
`312`	`315`	`if (vm._reused) {`
`313`	`316`	`// this is the vm we are actually in front of`
`314`	`317`	`currentNext = findNextVm(vm, ref)`
`315`	`318`	`// we only need to move if we are not in the right`
`316`	`319`	`// place already.`
`317`	`320`	`if (currentNext !== targetNext) {`
`318`		`- vm.$before(targetNext.$el, null, false)`
	`321`	`+ vm.$before(nextEl, null, false)`
`319`	`322`	`}`
`320`	`323`	`} else {`
`321`	`324`	`// new instance, insert to existing next`
`322`		`- vm.$before(targetNext.$el)`
	`325`	`+ vm.$before(nextEl)`
`323`	`326`	`}`
`324`	`327`	`}`
`325`	`328`	`vm._new = false`