I’m trying to construct a 2*2 matrix of checkboxes bases on the data from api and also manipulate the data based on user response in the checkboxes.

logMask:{
  "client": 8,
  "manager": 15,
  "server": 7,
  "public": 18,
  "network": 6
}

I want to construct a 2*2 matrix like this.

info, warn, error, entry, trace mask checkboxes for each process will be filled based on the binary value of the keys with last 5 bits. The number of processes and these masks may vary from the api response.

For eg: The first row is for client which has decimal value 8
Binary equivalent is 01000

These bits are filled in the matrix right to left.
1-checked 0- unchecked.

I have an apply button on which the vice versa should happen.
Binary values from the checkboxes are converted to decimal and the logMask should be manipulated and sent as payload to api.

Here’s the code:

<template lang="">
  <!-- <v-btn block color="black" rounded="2"> DEBUG SELECTION </v-btn> -->
  <v-table density="compact" class="border-thin" fixed-header>
    <thead>
      <tr>
        <th class="text-left">#</th>
        <th class="text-left">INFO</th>
        <th class="text-left">WARN</th>
        <th class="text-left">ERROR</th>
        <th class="text-left">ENTRY</th>
        <th class="text-left">TRACE</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(value, key) in logMask">
        <td>
          {{ key }}
        </td>
        <td>
          <v-checkbox
            v-bind:id="`info${key}`"
            :value="`info${key}`"
            v-model="checkedData"
          ></v-checkbox>
        </td>
        <td>
          <v-checkbox
            v-bind:id="`warn${key}`"
            :value="`warn${key}`"
            v-model="checkedData"
          ></v-checkbox>
        </td>
        <td>
          <v-checkbox
            v-bind:id="`error${key}`"
            :value="`error${key}`"
            v-model="checkedData"
          ></v-checkbox>
        </td>
        <td>
          <v-checkbox
            v-bind:id="`threadentry${key}`"
            :value="`threadentry${key}`"
            v-model="checkedData"
          ></v-checkbox>
        </td>
        <td>
          <v-checkbox
            v-bind:id="`tracefunc${key}`"
            :value="`tracefunc${key}`"
            v-model="checkedData"
          ></v-checkbox>
        </td>
      </tr>
    </tbody>
  </v-table>
  <div>
    {{ checkedData }}
  </div>
  <v-btn variant="plain" @click="applyTraceMaskChanges">Apply </v-btn>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checkedData = ref([])
const masks = ref(['info', 'warn', 'error', 'entry', 'trace'])
const logMask = ref({
  client: 8,
  manager: 15,
  server: 7,
  public: 18,
  network: 6
})

const applyTraceMaskChanges = () => {
  console.log('Calling mask change function>>>>>>>>')
  let tracelogKeys = Object.keys(logMask.value)
  console.log(tracelogKeys)
  const indexes = Object.values(checkedData.value).forEach((c) => {
    const index = masks.value.findIndex((m) => c.startsWith(m))
    console.log(index) // do something with the index here...
    Object.entries(logMask.value).forEach(([key, value], index) => {
      logMask.value[key] = 2 ** index
    })
  })
  console.log(logMask.value)
}
// console.log(checkedData.value)
</script>
<style></style>

I’m trying the apply button part which is still incomplete. But, I feel that I’m complicating the code. How can this be approached in a better way