VueJS 3 changing background on clicking a container

Question

Below is my code, I want to change background and text color on clicking the container that has a tailwind class of h-36. Can any one help me and come up with a solution to that issue.

    <template>
    <div>
        <SideBar />
        <NavBar />
        <div class="mt-20 ml-24 mr-2 mb-2 bg-white h-screen flex">
                    <div class="flex w-1/3 flex-col divide-y overflow-auto">
      <div class="h-20 text-black bg-white flex shadow-sm text-lg uppercase font-black w-full items-center px-4">
        <span>Configurations</span>
      </div>
      <div class="overflow-y-scroll">
      <div class="h-36 w-full bg-yellow-650 px-4 flex items-center cursor-pointer">
        <DesktopComputerIcon class="text-white h-12 w-12 flex-none"/>
        <div class="flex flex-col w-3/4 ml-3 text-white">
          <h3 class="text-white text-base font-bold">Front Office</h3>
          <p class="text-xs">
            Manage front office settings and appointments
          </p>
        </div>
      </div>
      <div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer">
        <UserGroupIcon class="text-black h-12 w-12 flex-none"/>
        <div class="flex flex-col w-3/4 ml-3 text-black">
          <h2 class="text-black text-base font-bold">Patients</h2>
          <p class="text-xs">
            Manage patients infomation and settings
          </p>
        </div>
      </div>
      <div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer">
        <PhotographIcon class="text-black h-12 w-12 flex-none"/>
        <div class="flex flex-col w-3/4 ml-3 text-black">
          <h2 class="text-black text-base font-bold">Imaging</h2>
          <p class="text-xs">
            Settings and management for imaging
          </p>
        </div>
      </div>
      <div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer" @click="showConfig('custom')">
        <AdjustmentsIcon class="text-black h-12 w-12 flex-none"/>
        <div class="flex flex-col w-3/4 ml-3 text-black">
          <h2 class="text-black text-base font-bold">Custom Settings</h2>
          <p class="text-xs">
            Manage time slots, departments, and others
          </p>
        </div>
      </div>
      <div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer" @click="showConfig('billing')">
        <CashIcon class="text-black h-12 w-12 flex-none"/>
        <div class="flex flex-col w-3/4 ml-3 text-black">
          <h2 class="text-black text-base font-bold">Billing</h2>
          <p class="text-xs">
            Manage billing controls, currency, amounts, treatments
          </p>
        </div>
      </div>
      <div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer">
        <LibraryIcon class="text-black h-12 w-12 flex-none"/>
        <div class="flex flex-col w-3/4 ml-3 text-black">
          <h2 class="text-black text-base font-bold">Insurance</h2>
          <p class="text-xs">
            Manage insurance claims and payments
          </p>
        </div>
      </div>
      <div class="h-36 w-full bg-white px-4 flex items-center cursor-pointer" @click="showConfig('users')">
        <UserIcon class="text-black h-12 w-12 flex-none"/>
        <div class="flex flex-col w-3/4 ml-3 text-black">
          <h2 class="text-black text-base font-bold">Users</h2>
          <p class="text-xs">
            Create new users, manage uses, edit and delete
          </p>
        </div>
      </div>
      </div>
   </div>
            <div class="flex w-2/3 p-10">
                <div class="w-full overflow-auto">
                    <Billing v-if='billing'/>
                    <CustomsConfig v-if='custom'/>
                    <Users v-if='users'/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
  UserGroupIcon,
  PhotographIcon,
  AdjustmentsIcon,
  CashIcon,
  LibraryIcon,
  UserIcon,
  DesktopComputerIcon,
} from '@heroicons/vue/outline';
import { ref } from 'vue';
import SideBar from '@/components/shared/SideBar.vue';
import NavBar from '@/components/shared/NavBar.vue';
import Billing from '@/components/configurations/settings/ui/billing.vue';
import CustomsConfig from '@/components/configurations/settings/ui/customConfig.vue';
import Users from '@/components/configurations/settings/ui/allUsers.vue';

export default {
  components: {
    SideBar,
    NavBar,
    UserGroupIcon,
    PhotographIcon,
    AdjustmentsIcon,
    CashIcon,
    LibraryIcon,
    UserIcon,
    DesktopComputerIcon,
    CustomsConfig,
    Users,
    Billing,
  },
  setup() {
    const custom = ref(false);
    const users = ref(false);
    const billing = ref(false);

    const showConfig = (config) => {
      if (config === 'custom') {
        custom.value = true;
        users.value = false;
        billing.value = false;
      }
      if (config === 'users') {
        custom.value = false;
        users.value = true;
        billing.value = false;
      }
      if (config === 'billing') {
        custom.value = false;
        users.value = false;
        billing.value = true;
      }
    };
    return {
      custom,
      users,
      billing,
      showConfig,
    };
  },
};
</script>

Because I want when the user clicks that div it changes the background and text color and render a component on the right hand side.

Answer 1

You can simply bind class property in the container so it takes the desired value

<div :class="desiredClass"  class="h-36 w-full.....

and in your showConfig function you can update the value of desiredClass accordingly

this.desiredClass = "h-26"

you may want also to declare desiredClass as a reactive state .