Vue: `this.$scopedSlots.default()` returns VNode directly or array of VNodes depending on content

[adamwathan]

Version

2.5.16

Reproduction link

https://jsfiddle.net/50wL7mdz/323954/

Steps to reproduce

1. Create a component that uses a render function to return some parent element with this.$scopedSlots.default({}) as the children.
2. Create an instance of that component that passes multiple elements to the scoped slot and see this.$scopedSlots.default({}) return an array.
3. Create an instance of that component that passes a single element to the scoped slot and see this.$scopedSlots.default({}) return a VNode, not an array with a single VNode in it.

What is expected?

this.$scopedSlots.default({}) should always return an array of VNodes, even if there's only one VNode in the array.

This is how this.$slots.default behaves.

What is actually happening?

this.$scopedSlots.default({}) returns mixed types: an array when there are multiple elements in the slot, or a direct VNode instance if there is only a single child.

---

This is inconsistent with how regular slots behave in render functions, and means any render function component rendering scoped slots as children needs to type check the result of invoking the slot to decide if it needs to be wrapped in an array:

render(h) {
  const children = this.$scopedSlots.default({})
  return h('div', {}, Array.isArray(children) ? children : [children])
}

Contrast that with regular slots where it is always safe to pass the slot as a child because it is always an array:

render(h) {
  return h('div', {}, this.$slots.default)
}

It's a bummer because although this is pretty easy to classify as a bug, it would be a breaking change for a lot of people using scoped slots to write components that use the default scoped slot as their root element:

render() {
  return this.$scopedSlots.default({ someDataThisComponentIsResponsibleFor })
}

If this bug were fixed, anyone with a component like that would need to re-write it like this:

render() {
  return this.$scopedSlots.default({ someDataThisComponentIsResponsibleFor })[0]
}

If this isn't a bug and is by design, I'd love to better understand the reasoning!

[yyx990803]

I was just thinking about this today. I think it makes more sense to make it consistent and always return an Array.

[adamwathan]

Cool! It would be great if it were possible to do this without breaking existing code, but the only way I can think of to do that is to allow render to return either a single node, or an array that contains a single node (so return this.$scopedSlots.default({}) would still work.)

Is that feasible, or does it sound like a horrible idea?

Something as simple as this in core/instance/render.js seems to work in my testing:

    } else {
      vnode = vm._vnode
    }
  }

+ if (Array.isArray(vnode) && vnode.length === 1) {
+   vnode = vnode[0]
+ }

  // return empty vnode in case the render function errored out
  if (!(vnode instanceof VNode)) {
    if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
      warn(
        'Multiple root nodes returned from render function. Render function ' +
        'should return a single root node.',

[mekhami]

Any commentary on this? I still run into this problem every day.

edit: it seems this problem was actually 'fixed' but some other libraries haven't updated to return the [0]. This problem is really confusing, though.

[Justineo]

@yyx990803 Are we expecting breaking changes in 2.6 if we are gonna fix this?

[yyx990803]

@Justineo making it all Arrays could technically be a breaking change - although could be somewhat justified as a fix. Also, a component that does not check for the value possibly being an Array will break depending on how it's being used, so I assume a decent percentage of existing code should be checking for it already.

[AlbertMarashi]

this should pass in 2.6, although it could be considered a breaking change, its how it should work

[yyx990803]

Implemented in c7c13c2.

Also made it possible to return an Array of a single VNode from render functions - thus avoiding breaking the usage of directly returning a scoped slot.

[decademoon]

https://github.com/vuejs/vue/blob/c7c13c2a156269d29fd9c9f8f6a3e53a2f2cac3d/src/core/vdom/helpers/normalize-scoped-slots.js#L23

Technically this allows scoped slots to return falsy values, so the result won't always be an array. Is this allowed? Shouldn't it return an empty array instead?

[yyx990803]

@decademoon the current implementation has changed: https://github.com/vuejs/vue/blob/dev/src/core/vdom/helpers/normalize-scoped-slots.js#L34

[decademoon]

@yyx990803 Ah, so the current behavior is the result will always be a non-empty array of vnodes or undefined.

[yyx990803]

@decademoon correct!