<template>
<div>
<app-tabs class="w-11/12 lg:w-10/12 mx-auto" :tabList="contentList" variant="horizontal">
<template v-for="content in contentList" v-slot:[content.SID]="">
<div class="align-items">{{ 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.
>Solution :
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" class="align-items">{{ content.id }}<br/>
{{ content.name }} {{ content.val }}</div>
</template>