Adding <slot> to the Duplicate Content Area

Question

I have a menu component that simplifies using a prop with an array of options and displays an item in the menu for each of them. I wanted to be able to customize the markup that was inside each of the menu items, depending on the use case, so I used a placeholder inside the menu item element.

You can see an example of this in the fiddle .

const Menu = { template: ` <ul> <li v-for="item in options" :class="item.colour"> <slot></slot> <span class="label">{{item.name}}</span> </li> </ul> `, data: () => { return { options: [ { name: 'one', colour: 'red' }, { name: 'two', colour: 'green' }, { name: 'three', colour: 'blue' }, { name: 'four', colour: 'yellow' } ] }; } }; const app = new Vue({ components: { custommenu: Menu, }, template: `<custommenu><span class="colour"></span></custommenu>` }); app.$mount('#app'); 

This worked fine on v1 Vue.JS, but after upgrading to v2 I see the error "Duplicate slot" default "found in the same rendering tree, which can lead to rendering errors."

Is this something that is possible in v2, or is there an alternative way to achieve the same?

Answer 1

It looks like you will need a scope for this, so you will need to wrap the contents of the slot in a template using scope :

 <custommenu> <template scope="colour"> <span class="colour"></span> </template> </custommenu> 

Then you need to add this to the slot in the component template:

 <ul> <li v-for="item in options" :class="item.colour"> <slot colour></slot> <span class="label">{{item.name}}</span> </li> </ul> 

Here's the updated JSFiddle: https://jsfiddle.net/kLge4wun/