如何应用v-槽的样式？

Question

​

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

​

无法在vuejs插槽中添加css类。我犯了个错误，

迭代中的错误元素期望有'v-bind:key‘指令vue/require for-key。

是否有任何方法来添加css类，或者任何其他替代的方法来实现它？有了互联网资源，我找到了由Deep (如>>> )做的方法，但不确定如何进行。

Answer 1

发生错误是因为缺少密钥(:key="uniqueID")。在循环中添加一个键，如：

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