I’m relatively new to VUE JS.

I have a menu, opening onclick of a button inside a component – SelectionMatrix.vue
Inside the menu, I have

1. one select box at the top which has options of 5 different processes, Processa, Processb,Processc, Processd and Processd
2. 32 checkboxes one below another say banana, apple, orange as in the code.

I have an endpoint which gives me the response below:

{
"processName": "processa",
"debugMask": {
    "processa": "3221225472",
    "processb": "3221225472",
    "processc": "3221225472",
    "processd": "3221225472",
    "processe": "3221225472"
}

}

Here’s what I want to do:

1. Update the selectedvalue of the selectbox to “processName” from response. In this case – processa
2. Pick the key value from debugMask, corresponding to the processname selected. In this case – 3221225472
3. Convert the key value picked into a 32 bit binary string (pre pend with zeros after binary conversion to make it 32) –
   In this case – 11000000000000000000000000000000

In this string, each index corresponds to a bit 1/0 and these decide the whether the checkboxes should be checked – banana and apple checkboxes should be checked

Here’s the code:

    <template>
  <v-menu v-model="menu" :close-on-content-click="false" location="bottom">
    <template v-slot:activator="{ props }">
      <v-btn :color="btnColor" v-bind="props" @click="toggleColor">
        DEBUG SELECTION
      </v-btn>
    </template>

    <v-card min-width="300" class="compact-card" dense>
      <v-list dense>
        <v-list-item dense>
          <v-select
            :items="['Processa', 'Processb', 'Processc','Processd','Processe']"
            v-model="selectedProcess"
            label="Select Process Name"
          ></v-select>

          <v-checkbox
            v-model="selectAll"
            label="Select All"
            @click="selectAllCheckboxes"
            dense
            class="compact-checkbox"
          ></v-checkbox>
        </v-list-item>

        <v-list-item dense v-for="(item, index) in debugOptions" :key="index">
          <v-checkbox
            v-model="item.checked"
            :label="item.label"
            :id="item.id"
            :value="item.value"
            :style="item.style"
            dense
            class="compact-checkbox"
          ></v-checkbox>
        </v-list-item>
      </v-list>

      <v-divider></v-divider>
      <v-row class="justify-end">
        <v-col cols="3" class="ma-3">
          <v-btn
            block
            color="black"
            rounded="2"
            @click="clearTraceMaskChanges()"
            >Clear all
          </v-btn>
        </v-col>
        <v-col cols="3" class="ma-3">
          <v-btn block color="black" rounded="2" @click="selectAll()"
            >Select all
          </v-btn>
        </v-col>
        <v-col cols="3" class="ma-3">
          <v-btn
            block
            color="black"
            rounded="3"
            @click="handleShowConfirmationDialog()"
            >Apply
          </v-btn>
        </v-col>
      </v-row>
    </v-card>
  </v-menu>
  <BaseConfirmationBox
    v-model="showConfirmation"
    @confirm="applyMaskChanges"
    @cancel="handleCancel"
    :message="confirmationMessage"
  />
</template>

<script setup lang="ts">
import { ref, watch} from 'vue'
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import AppUtils from '@/utils/appUtils'
import { useLogsStore } from '../stores/logsStore'
import BaseConfirmationBox from '@/components/BaseConfirmationBox.vue'
const menu = ref(false)
const checkedData = ref([''])
const selectedProcess = ref('Configurator')
const { getTraceMasks, applyTraceMaskChanges } = useLogsStore()
const { traceMaskData } = storeToRefs(useLogsStore())

const showConfirmation = ref(false)
const confirmationMessage = ref('Are you sure?')
const appUtils = new AppUtils()
const btnColor = ref('black')
const selectAll = ref(false)
const debugOptions = ref([
  { id: 'banana', label: 'BANANA', value: 'BANANA', checked: true },
  { id: 'apple', label: 'APPLE', value: 'APPLE', checked: true },
  { id: 'orange', label: 'ORANGE', value: 'ORANGE', checked: true },
  { id: 'grape', label: 'GRAPE', value: 'GRAPE', checked: true },
  { id: 'mango', label: 'MANGO', value: 'MANGO', checked: true },
  { id: 'pineapple', label: 'PINEAPPLE', value: 'PINEAPPLE', checked: true },
  { id: 'unused1', label: 'UNUSED_1', value: 'UNUSED_1', checked: true, style: 'color:blue;' },
  { id: 'kiwi', label: 'KIWI', value: 'KIWI', checked: true },
  { id: 'pear', label: 'PEAR', value: 'PEAR', checked: true },
  { id: 'peach', label: 'PEACH', value: 'PEACH', checked: true },
  { id: 'unused2', label: 'UNUSED_2', value: 'UNUSED_2', checked: true, style: 'color:blue;' },
  { id: 'plum', label: 'PLUM', value: 'PLUM', checked: true },
  { id: 'cherry', label: 'CHERRY', value: 'CHERRY', checked: true },
  { id: 'unused3', label: 'UNUSED_3', value: 'UNUSED_3', checked: true, style: 'color:blue;' },
  { id: 'strawberry', label: 'STRAWBERRY', value: 'STRAWBERRY', checked: true },
  { id: 'unused4', label: 'UNUSED_4', value: 'UNUSED_4', checked: true, style: 'color:blue;' },
  { id: 'blueberry', label: 'BLUEBERRY', value: 'BLUEBERRY', checked: true },
  { id: 'raspberry', label: 'RASPBERRY', value: 'RASPBERRY', checked: true },
  { id: 'blackberry', label: 'BLACKBERRY', value: 'BLACKBERRY', checked: true },
  { id: 'watermelon', label: 'WATERMELON', value: 'WATERMELON', checked: true },
  { id: 'melon', label: 'MELON', value: 'MELON', checked: true },
  { id: 'papaya', label: 'PAPAYA', value: 'PAPAYA', checked: true },
  { id: 'dragonfruit', label: 'DRAGONFRUIT', value: 'DRAGONFRUIT', checked: true },
  { id: 'lychee', label: 'LYCHEE', value: 'LYCHEE', checked: true },
  { id: 'pomegranate', label: 'POMEGRANATE', value: 'POMEGRANATE', checked: true },
  { id: 'fig', label: 'FIG', value: 'FIG', checked: true },
  { id: 'date', label: 'DATE', value: 'DATE', checked: true },
  { id: 'coconut', label: 'COCONUT', value: 'COCONUT', checked: true },
  { id: 'avocado', label: 'AVOCADO', value: 'AVOCADO', checked: true },
  { id: 'guava', label: 'GUAVA', value: 'GUAVA', checked: true },
  { id: 'jackfruit', label: 'JACKFRUIT', value: 'JACKFRUIT', checked: true },
  { id: 'durian', label: 'DURIAN', value: 'DURIAN', checked: true },
]);

const selectAllCheckboxes=() =>{
      debugOptions.value.forEach(option => {
        option.checked = selectAll.value;
      });
    }

const handleShowConfirmationDialog = () => {
  confirmationMessage.value = 'Are you sure you want to apply changes?'
  showConfirmation.value = true
}

const handleCancel = () => {
  confirmationMessage.value = ''
  showConfirmation.value = false
}

function toggleColor() {
  if (btnColor.value === 'black') btnColor.value = 'primary'
  else btnColor.value = 'black'
  getTraceMasks().then(()=>{
    fillCheckBoxData()
  })
}

const fillCheckBoxData = () => {
  let result;
  console.log('TraceMaskData>>>>>>>>>>>>',traceMaskData.value.debugMask)
  console.log('selectedProcess>>>>>>',selectedProcess.value)
  const number = traceMaskData.value.debugMask[selectedProcess.value.toLowerCase()];
  console.log('number for the process>>>>>>>>>>>>>>',number)
    // let number = parseInt(traceMaskData.value[key as keyof typeof traceMaskData.value])
    result = parseInt(number).toString(2)
    console.log("Result>>>>>>>>>>>>", result)
    if (result.length < 32) {
      for (var i = result.length; i < 32; i++) {
        result = '0' + result
      }
    }
    const updatedOptions = debugOptions.value.map((item, index) => {
  return {
    ...item,
    checked: result[index] === '1'
  };
});

debugOptions.value = [...updatedOptions];
console.log('updated checkbox values>>>>>>>>>',debugOptions.value)

}

const tracelogMaskDataTmp = ref({})
tracelogMaskDataTmp.value = traceMaskData



// Watch for changes in the `menu` state to reset button color when menu closes
watch(menu, (newValue) => {
      if (!newValue) {
        btnColor.value = 'black';
      }
    });

onMounted(() => {
  getTraceMasks().then(()=>{
    console.log('Tracemasks value inside component>>>>>>>>>>>>>>>',traceMaskData.value)
    if (traceMaskData.value.debugMask) {
      selectedProcess.value = traceMaskData.value.processName;
      console.log('selected process>>>>>>>>>>>>',selectedProcess.value)
      fillCheckBoxData();
    }
    // selectedProcess.value=traceMaskData.value.processName
    // console.log('selected process>>>>>>>>>>>>',selectedProcess.value)
    // fillCheckBoxData()
  })

})
</script>

<style scoped>
:deep() .v-table .v-table__wrapper > table > tbody > tr > td:not(:last-child),
.v-table .v-table__wrapper > table > tbody > tr > th:not(:last-child) {
  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}

:deep() .v-table .v-table__wrapper > table > tbody > tr > td {
  width: 150px !important;
}
:deep(.v-input__details) {
  display: none;
}
.v-card.compact-card :deep(.v-input) {
  --v-input-control-height: 20px; /* Makes the checkbox height smaller */
  --v-input-padding-top: 4px;
  --v-input-padding-bottom: 4px;
}
</style>

1. The binary conversion is working fine.
2. console.log(‘updated checkbox values>>>>>>>>>’,debugOptions.value) and the watch works correctly. And I have verified the value of debugOptions
   changing after the GET request.

However this change in debugOptions isn’t reflecting in the UI. The checkboxes aren’t getting checked.
What am I missing here?