Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vuejs/vue/issues/8056 below:

`this.$scopedSlots.default()` returns VNode directly or array of VNodes depending on content · Issue #8056 · vuejs/vue · GitHub

2.5.16

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

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.

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.

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!

luisdalmolin, dattn, AlbertMarashi, daniele-orlando, xianshenglu and 1 more

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4