In my form, I have two dropdown select option fields generated using loops from predefined constants. One dropdown is for selecting different "sides" and the other for choosing various "caps". When a user selects "2-Sided" in the sides dropdown, I want to disable the active item under caps by setting it to false.
<template>
...
<!-- Sides -->
<div class="mt-6">
<h3>Sides</h3>
<RadioGroup v-model="sides" class="mt-2">
<RadioGroupLabel class="sr-only"> Choose Sides </RadioGroupLabel>
<div class="grid grid-cols-3 gap-3 sm:grid-cols-4">
<RadioGroupOption as="template" v-for="option in sideOptions" :key="option.name" :value="option" :disabled="!option.active" v-slot="{ active, checked }">
<div :class="[option.active ? 'cursor-pointer focus:outline-none' : 'opacity-25 cursor-not-allowed', active ? 'ring-2 ring-offset-2 ring-indigo-500' : '', checked ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50', 'border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1']">
<RadioGroupLabel as="span">
{{ option.name }}
</RadioGroupLabel>
</div>
</RadioGroupOption>
</div>
</RadioGroup>
</div>
<!-- Caps -->
<div class="mt-6">
<h3>Caps</h3>
<RadioGroup v-model="caps" class="mt-2">
<RadioGroupLabel class="sr-only"> Choose Caps </RadioGroupLabel>
<div class="grid grid-cols-3 gap-3 sm:grid-cols-4">
<RadioGroupOption as="template" v-for="option in capOptions" :key="option.name" :value="option" :disabled="!option.active" v-slot="{ active, checked }">
<div :class="[option.active ? 'cursor-pointer focus:outline-none' : 'opacity-25 cursor-not-allowed', active ? 'ring-2 ring-offset-2 ring-indigo-500' : '', checked ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50', 'border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1']">
<RadioGroupLabel as="span">
{{ option.name }}
</RadioGroupLabel>
</div>
</RadioGroupOption>
</div>
</RadioGroup>
</div>
</template>
<script setup lang="ts">
...
const capOptions = [
{ name: 'No Cap', active: true },
{ name: '2-Sided', active: true },
{ name: '3-Sided', active: true },
{ name: '4-Sided', active: true },
]
const sideOptions = [
{ name: '2-Sided', active: true },
{ name: '3-Sided', active: true },
{ name: '4-Sided', active: true },
]
const caps = ref(capOptions[0])
const sides = ref(sideOptions[0])
</script>