Description
Version
3.0.4
Reproduction link
https://jsfiddle.net/haferje/fs458ycu/15/
Steps to reproduce
- open JSFiddle example link
- open console
- click "Add Item" button in example
- see console exception "Uncaught (in promise) TypeError: Cannot read property '0' of null"
What is expected?
I assume the Box component slot would render as blank or the default slot content, if the v-for acts on an empty array, but display the array items when it is mutated.
What is actually happening?
Upon adding an item to the empty array, the Box component re-renders its slot, but is trying to access the 0 index in patchBlockChildren(), which it didn't previously render. This throws an exception, but I would expect it to render a single item where there would previously be no items.
I would expect a v-for iterated tag in a component slot to show no items when the item array is empty, or show the default slot content. When I push an item on the array, I would expect the item to be shown in the slot and replace any default slot content. However, when the first item is pushed into the array, the patching logic throws an exception. It took me hours to understand why this was happening, but adding a container tag around the v-for tag (additional commented code in example) fixes the issue, but does prevent the default slot content from showing when the array is empty. Am I misunderstanding how this should work? I didn't find anything in the documentation that explains this behavior.