<template> <div class="flex rounded-lg overflow-hidden"> <div v-for="(prevention, index) in value" :key="index" v-tooltip="prevention.tooltip" class="py-1 px-2 text-xs" :class="classes(prevention)" v-text="prevention.letter"></div> </div> </template> <script setup> const props = defineProps({ value: { required: true, type: Object, }, }); function classes(prevention) { return prevention.value ? 'bg-green-800 text-green-200' : 'bg-neutral-700 text-neutral-200'; } </script>