Insert named slot inside v-for loop vuejs
Slot names have to be unique. If you want to create slots inside a loop, you can add a number to the slot name, e.g.:
<div v-for="num in nums" :key="num"> <slot :name="'foo_' + num"></slot></div>And then use them like this:
<foo-component :nums="3"> <template slot="foo_1"> <span>Inside the foo component slot 1</span> </template> <template slot="foo_2"> <span>Inside the foo component slot 2</span> </template> <template slot="foo_3"> <span>Inside the foo component slot 3</span> </template></foo-component>