Skip to content

Commit 88c38ce

Browse files
committed
fix v-repeat dom manipulation for block instances (fix vuejs#799)
1 parent 6c3b290 commit 88c38ce

File tree

2 files changed

+52
-7
lines changed

2 files changed

+52
-7
lines changed

src/directives/repeat.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -309,17 +309,20 @@ module.exports = {
309309
vm.$before(ref)
310310
}
311311
} else {
312+
// make sure to insert before the comment node if
313+
// the vms are block instances
314+
var nextEl = targetNext._blockStart || targetNext.$el
312315
if (vm._reused) {
313316
// this is the vm we are actually in front of
314317
currentNext = findNextVm(vm, ref)
315318
// we only need to move if we are not in the right
316319
// place already.
317320
if (currentNext !== targetNext) {
318-
vm.$before(targetNext.$el, null, false)
321+
vm.$before(nextEl, null, false)
319322
}
320323
} else {
321324
// new instance, insert to existing next
322-
vm.$before(targetNext.$el)
325+
vm.$before(nextEl)
323326
}
324327
}
325328
vm._new = false

test/unit/specs/directives/repeat_spec.js

+47-5
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ if (_.inBrowser) {
314314
expect(el.innerHTML).toBe('<div>AAA</div><div>BBB</div><div>CCC</div><!--v-repeat-->')
315315
})
316316

317-
it('block repeat', function () {
317+
it('block repeat', function (done) {
318318
var vm = new Vue({
319319
el: el,
320320
template: '<template v-repeat="list"><p>{{a}}</p><p>{{a + 1}}</p></template>',
@@ -326,10 +326,52 @@ if (_.inBrowser) {
326326
]
327327
}
328328
})
329-
var markup = vm.list.map(function (item) {
330-
return '<!--v-start--><p>' + item.a + '</p><p>' + (item.a + 1) + '</p><!--v-end-->'
331-
}).join('')
332-
expect(el.innerHTML).toBe(markup + '<!--v-repeat-->')
329+
assertMarkup()
330+
vm.list.reverse()
331+
_.nextTick(function () {
332+
assertMarkup()
333+
done()
334+
})
335+
336+
function assertMarkup () {
337+
var markup = vm.list.map(function (item) {
338+
return '<!--v-start--><p>' + item.a + '</p><p>' + (item.a + 1) + '</p><!--v-end-->'
339+
}).join('')
340+
expect(el.innerHTML).toBe(markup + '<!--v-repeat-->')
341+
}
342+
})
343+
344+
// added for #799
345+
it('block repeat with diff', function (done) {
346+
var vm = new Vue({
347+
el: el,
348+
template: '<template v-repeat="list" v-component="test"></template>',
349+
data: {
350+
list: [
351+
{ a: 1 },
352+
{ a: 2 },
353+
{ a: 3 }
354+
]
355+
},
356+
components: {
357+
test: {
358+
template: '<p>{{a}}</p><p>{{a + 1}}</p>'
359+
}
360+
}
361+
})
362+
assertMarkup()
363+
vm.list.reverse()
364+
_.nextTick(function () {
365+
assertMarkup()
366+
done()
367+
})
368+
369+
function assertMarkup () {
370+
var markup = vm.list.map(function (item) {
371+
return '<!--v-start--><p>' + item.a + '</p><p>' + (item.a + 1) + '</p><!--v-end-->'
372+
}).join('')
373+
expect(el.innerHTML).toBe(markup + '<!--v-repeat-->')
374+
}
333375
})
334376

335377
it('component + parent directive + transclusion', function (done) {

0 commit comments

Comments
 (0)