question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

New (2.6 ) slot syntax results in slots not added to vm.$slots, breaking existing render functions

See original GitHub issue

Version

2.6.1

Reproduction link

https://jsfiddle.net/3kpf9u54/4/

Steps to reproduce

  1. Observe the contents of the <template> displayed
  2. Change the code from <template slot="content"> to <template #content> or <template v-slot:content> and observe the contents stop being displayed
  3. Change the render function code from this.$slots.content to this.$scopedSlots.content() and observe the contents be displayed again

What is expected?

Contents are displayed all the time; old render functions don’t break when used with new syntax

What is actually happening?

New syntax forces slots into being scoped, breaking existing render functions


I’m actually not sure if this is intentional or not, but it breaks Vuetify, and probably other things too. Assuming this is intentional, it makes writing functional components more difficult, as you have to either:

  1. check both this.$slots (for Vue pre-2.6) and this.$scopedSlots (for Vue post-2.6)
  2. only check this.$scopedSlots and ask Vue pre-2.6 users to add slot-scope everywhere so all slots become scoped
  3. only check this.$slots and ask Vue post-2.6 users to use the legacy syntax

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
joelpro2commented, Apr 23, 2019

i made a simple test and v-slot still dont add the slots in $slots fiddle My bad, i was using vue 2.6.0, its corrected in 2.6.10

0reactions
yyx990803commented, Feb 8, 2019

In 0e8560d0 I’ve made it so that only slots using the new v-slot syntax without scope are exposed on this.$slots. This should ensure intended behavior without affecting existing usage of legacy slots.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Please note that slots are not reactive - Stack Overflow
The example you're referring to is using this snippet of code. Vue.component('blog-post', { render: function (createElement) { var header ...
Read more >
How to fix - Slot invoked outside of the render function in vue 3
Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the...
Read more >
Vue 3 Migration Changes: Replace, Rename, and Remove (Pt ...
On a related note, if your code is using the $scopedSlots property, that has to be renamed to $slots in Vue 3. Functional...
Read more >
Migration to Vue 3 - GitLab Docs
In Vue 2.6 slot attribute was already deprecated in favor of v-slot directive. ... To fix rendering slots in shallowMount , we need...
Read more >
NFS in NetApp ONTAP. Best practice and implementation guide
This guide covers the latest available ONTAP versions ... Table 29) 50x 500MB files using dd — NFSv3, 65536 slots — VM dirty...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found