Vue: Dynamic slot name bound from v-for directive not working with scoped slots
Version
2.3.2
Reproduction link
https://jsfiddle.net/frctmhLd/3/
Steps to reproduce
Create a scoped slot using the element, as is necessary
Use dynamic props to set the slot property on the
Attempt to utilize this slot
What is expected?
The slot is loaded and display correctly
What is actually happening?
Dynamic properties don't seem to work on the component, so the "slot" property is getting set to null and it is not being loaded
sparamasivan
All 5 comments
Not sure how to label it so, labelling it as improvement and bug
posva
on 5 May 2017
@posva @sparamasivan Am I missing something? There are two root elements in the parent compoent, so an error is reported.
Vue.component('parent', {
template: '' +
'<child>' +
'<template :slot="test" scope="props">' +
'<p>{{props.text}}</p>' +
'</template>' +
'</child>' +
'<child>' +
'<template v-for="slotName in slotNames" :slot="slotName" scope="props">' +
'<p>{{props.text}}</p>' +
'</template>' +
'</child>',
data: function () {
return {
slotNames: ["test", "test1", "test2"],
test: 'test'
}
}
});
defcc
on 8 May 2017
@defcc Oh, sorry, I forgot to update the repro, yeah, it's wrong, but adding a single root element still showcases the problem (https://jsfiddle.net/frctmhLd/3/)
posva
on 8 May 2017
I also updated the demo here. https://jsfiddle.net/frctmhLd/4/
Seems to be a bug with scoped slots.
defcc
on 8 May 2017
Thank you folks for fixing this.
sparamasivan
on 10 May 2017
Related issues
aviggngyv
·
3Comments
bdedardel
·
3Comments
julianxhokaxhiu
·
3Comments
finico
·
3Comments
loki0609
·
3Comments
Most helpful comment
I also updated the demo here. https://jsfiddle.net/frctmhLd/4/
Seems to be a bug with scoped slots.