Subscribe on changes!

"Cannot read property '0' of null" thrown when appending to empty array in slot content

avatar
Dec 29th 2020

Version

3.0.4

Reproduction link

https://jsfiddle.net/haferje/fs458ycu/15/

Steps to reproduce

  1. open JSFiddle example link
  2. open console
  3. click "Add Item" button in example
  4. 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.

avatar
Dec 29th 2020

Wasn't this already fixed but not released?

avatar
Dec 29th 2020

Possible, could have missed that.

avatar
Dec 29th 2020

Tested on master and works Duplicate of https://github.com/vuejs/vue-next/issues/2715