<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>No se puede agregar la clase css dentro de las ranuras de vuejs. Recibo un error como,
error Los elementos en la iteración esperan tener directivas 'v-bind:key' vue/require-v-for-key
¿Hay alguna forma de agregar la clase CSS o alguna otra forma alternativa de hacerlo? Con los recursos de Internet, encontré la manera de hacerlo mediante selectores profundos como >>> pero no estoy seguro de cómo proceder.
Su error ocurre porque falta la clave ( :key="uniqueID" ). Agregue en su ciclo una clave como:
<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>