I'm working with Vue 3, Vuetify, and TypeScript for my searchField component. Inside, I have two buttons: FreeItemMaster and PatternMaster. Clicking on these buttons should change their background color and display respective content below them. However, the code isn't behaving as expected, and the checkbox feature isn't functioning either. What could be causing this issue? Below is how I envision the screen after clicking each button: https://i.stack.imgur.com/Gsg7N.png(https://i.stack.imgur.com/Ih3bS.png)(https://i.stack.imgur.com/Gsg7N.png)
<template>
<div class="search-fields">
<div class="search-condition mt-4">
<div class="d-flex ml-6">
<button :class="{'dark-grey-button': isFreeItemMasterBtnClicked, 'light-grey-button': !isFreeItemMasterBtnClicked}" @click="isFreeItemMasterBtnClicked = true; isPatternMasterBtnClicked = false">FreeItemMaster</button>
<button :class="{'dark-grey-button': isPatternMasterBtnClicked, 'light-grey-button': !isPatternMasterBtnClicked}" @click="isPatternMasterBtnClicked = true; isFreeItemMasterBtnClicked = false">PatternMaster</button>
</div>
<div class="d-flex" v-if="isFreeItemMasterBtnClicked">
<!-- FreeItemMasterBtn content -->
<div class="ml-3 mt-5">
<v-checkbox
dense
hide-details
label="FreeItemMaster content"
/>
</div>
<div class="ml-5 mt-7">
<v-btn rounded small style="background-color: #1ea0dc; color: #ffffff"
>Search</v-btn
>
</div>
</div>
<div class="d-flex" v-if="isPatternMasterBtnClicked">
<!-- PatternMasterBtn content -->
<div class="ml-3 mt-5">
<v-checkbox
dense
hide-details
label="PatternMaster content"
/>
</div>
<div class="ml-5 mt-7">
<v-btn rounded small style="background-color: #1ea0dc; color: #ffffff"
>Search</v-btn
>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isFreeItemMasterBtnClicked = ref(false);
const isPatternMasterBtnClicked = ref(true);
</script>
<style lang="scss" scoped>
.search-fields {
display: flex;
justify-content: space-between;
.search-condition {
p {
font-size: 14px;
font-weight: bold;
}
}
}
.dark-grey-button {
background-color: #51565b;
color: white;
padding: 10px 10px;
border: none;
text-align: center;
display: inline-block;
font-size: 14px;
margin-right: 2px;
}
.light-grey-button {
background-color: #f0f3f4;
color: black;
padding: 10px 10px;
border: none;
text-align: center;
display: inline-block;
font-size: 14px;
margin-right: 10px;
}
</style>