<slot :name="xxx"></slot> :slot="xxx" not worked in v-for loop
See original GitHub issueIn my code, a component is registered with different slot names calculated in a v-for loop as below:
//template
<script type="text/x-vue-template" id="slot-parent-template">
<ul>
<li v-for="item in items">
<h1>{{item}}</h1>
//slot name is computed by item (data type Number)
<slot :name="item"></slot>
</li>
</ul>
</script>
//register component and init instance in js
<script type="text/javascript">
Vue.component('slot-parent',{
props:['items'],
template:"#slot-parent-template"
});
new Vue({
el:'body',
data:{
items:[1,2,3,4,5]
}
});
</script>
and below code works fine :
//in html
<slot-parent :items="items">
//insert every slot manually works fine
<p slot="1">1</p>
<p slot="2">2</p>
<p slot="3">3</p>
<p slot="4">4</p>
<p slot="5">5</p>
</slot-parent>
but when I changed the code as below, slot can’t be inserted into the component view,
//in html
<slot-parent :items="items">
// insert slots with v-for loop, slot names are calculated by item
<p v-for="item in items" :slot="item">{{item}}</p>
</slot-parent>
is the way I design this component wired ? or still there is any other way to solve the problem ? I understand partial and component can be used in the slot-parent to do the same thing, but how about just do this with slot, since slot content can be written obviously in html file.
By the way, same problem found in Vue forum http://forum.vuejs.org/topic/3448/dynamic-slot-names-not-working-anymore-in-new-version/5
Issue Analytics
- State:
- Created 8 years ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
I don't understand why it won't connect - Stack Overflow
QObject::connect: No such slot QLCDNumber::display(resultat). display(resultat) is not a slot function. You can try the following:
Read more >Vue3. X + Vue cli components_vue.js_EUV-DevPress官方社区
To sum up: In this lesson, we mainly learned two knowledge: one is the abbreviation of named slot, and the other is the...
Read more >TLS-3XX Series Consoles System Setup Manual - Veeder-Root
DAMAGE CLAIMS / LOST EQUIPMENT. Thoroughly examine all components and units as soon as they are received. If any cartons are damaged or...
Read more >View topic - Dropdown Menu Lists Editor - Cheat Engine
Fill in a search string for the name of the cheat table records that you want to add the list to. e.g Slot...
Read more >Team:BUCT-China/js/vuejs2610 - iGEM 2019
_Set = Set; } else { // a non-standard Set polyfill that only works with ... optimized shallow clone // used for static...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This has been fixed in 1.0.18.
v2.5.18 可以了 slot可以在v-for 下直接使用了