<slot :name="xxx"></slot> :slot="xxx" not worked in v-for loop

See original GitHub issue

In 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:closed
  • Created 8 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
yyx990803commented, Mar 18, 2016

This has been fixed in 1.0.18.

3reactions
LuDongWeicommented, Apr 9, 2018

v2.5.18 可以了 slot可以在v-for 下直接使用了

Read more comments on GitHub >

github_iconTop 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 >

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