How to apply styles for v-slot?-CodePudding

<template>
<div>
 <app-tabs   :tabList="contentList"  variant="horizontal">
 <template  v-for="content in contentList" v-slot:[content.SID]="">
 <div >{{ content.id }}<br/> //not breaking line and giving error
 {{ content.name }}{{ content.val}}</div>
 </template>
</app-tabs>
</div>
</template>

Unable to add css class inside of vuejs slots. I am getting error as,

error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

Is there any way to add css class, or any other alternative ways to do it? With internet resources, I found the way to do it by Deep Selectors like >>> but not sure how to proceed.

CodePudding user response：

Your error occurs because the key (:key="uniqueID") is missing. Add in your loop a key like :

<template  v-for="content in contentList" v-slot:[content.SID]="">
   <div :key="content.id" >{{ content.id }}<br/> 
 {{ content.name }} {{ content.val }}</div>
</template>