Order is not updated

[vmihailenco]

For example, https://codepen.io/vmihailenco/pen/NWbPpOQ .

Expected. Order of rows is updated.
Got. Order is not updated. Instead empty divs are inserted.

PS I am more interested in getting rid of empty divs rather than fixing order. For some reasons v-frag does not always unwrap elements, but I can't fully reproduce it...

[privatenumber]

@vmihailenco

Interesting use-case. v-frag is designed only to be added on root-nodes or components.

In your case, you can simply use <template>: https://codepen.io/privatenumber/pen/ExNaWzv

<template>
    <div>
		<button v-on:click="reverse">reverse</button>

		<table>
			<tr><th>Column1</th><th>Column2</th></tr>
			<template
				 v-for="i in numbers"
			>
				<tr
					v-show="i"
					:key="i + 'a'"
				>
					<td>a{{ i }}</td><td>{{ i }}</td>
				</tr>
				<tr
					v-show="i"
					:key="i + 'b'"
				>
					<td>b{{ i }}</td><td>{{ i }}</td>	
				</tr>
			</template>
		</table>
	</div>
</template>

<script>
export default {
	data: {
		numbers: [1, 2, 3, 4, 5],
	},
	methods: {
		reverse: function() {
			console.log('reverse', this.numbers)
			this.numbers = this.numbers.reverse()
		},
	},
};
</script>

[vmihailenco]

@privatenumber thanks for your example, but I really need multiple roots :)

Here is the bug I would like to get fixed - https://codepen.io/vmihailenco/pen/KKNwmKz . Click on slice button several times and you get:

Inspecting the element shows that element is not properly unwrapped (div is not removed).

[vmihailenco]

PS Clicking on restore does not remove broken elements. Which suggests that they were not properly removed and now are dangling unmanaged?

[privatenumber]

I see it now. Thanks for reporting. Will look into it

[privatenumber]

Fixed in 1.1.3

https://codepen.io/privatenumber/pen/LYbEdmp

<template>
    <div>
		<button v-on:click="restore">restore</button>
		<button v-on:click="slice">slice</button>
		
		{{ numbers }}
		
		<table>
			<tr><th>Column1</th><th>Column2</th></tr>
			<my-num v-for="i in numbers" :key="i" :num="i">
			</my-num>
		</table>
	</div>
</template>

<script>
Vue.component('my-num', {
	directives: {
		Frag
	},
  props: ['num'],
  template: '<div v-frag><tr><td>{{ num }}</td><td>{{ num }}</td></tr><tr><td>{{ num }}</td><td>{{ num }}</td></tr></div>'
})

export default {
	directives: {
		Frag
	},
	data: {
		numbers: [1, 2, 3, 4, 5, 6, 7],
	},
	methods: {
		restore: function() {
			this.numbers = [1, 2, 3, 4, 5, 6, 7]
		},
		slice: function() {
			this.numbers.splice(1, 1)
			this.numbers.reverse()
		},
	},
	mounted() {
		// If you want to access the elements:
		console.log('Elements:', this.$el.frag);
	}
};
</script>

[vmihailenco]

It seems to be working now. Thank you.