Vueで動的にCSSを付与する

<script setup>
const isSelectedClass = computed(() => {
  return exampleState.value.id === 0 ? 'text-gray-400' : 'black';
});
</script>

<template>
	<select
		v-model="exampleState.id"
		class="!mr-2 !w-32"
		:class="isSelectedClass"
	>
		<option :value="0">未選択</option>
		<option
			v-for="{ id, name } in exampleOptions"
			:key="id"
		>
			{{ name }}
		</option>
	</select>
</template>

<script setup>
const getColorClass = computed(() => (statusName) => {
  const colorClasses = {
    未対応: 'bg-red-300',
    処理中: 'bg-blue-300',
    NG: 'bg-yellow-300 text-black',
    処理済: 'bg-gray-500',
    完了: 'bg-gray-400',
  };

  return colorClasses[statusName];
});
</script>

<template>
  <div
    v-for="status in mainStatus"
    :key="status.id"
  >
    <span
      v-if="id === status.id"
      class="ds-badge w-[58px]"
      :class="getColorClass(status.name)"
    >
      {{ status.name }}
    </span>
  </div>
</template>