If else condition in v-for with v-checkbox using Vuetify

Question

I am trying to make a condition where looping through an object and displaying some checkboxes, when the value of a property is true to check the checkbox and when the value is false to make he checkbox unchecked. Checkboxes must be disabled.

What I have as an object is:

abilities: {
  ABA: true,   
  CCA: false,
  DENVER: true,
  DIR: false,
  FLOORTIME: false,
  ICF: false,
  LIS: false,
  PIVOTAL: false,
  TTEACH: false
}

What I have tried is:

<v-col md="3" v-for="(value, index) in getSingleUser.abilities" :key="index" :value="value">
  <v-row>
    <v-checkbox v-if="value = true" :label="index" v-model="Check" disabled ></v-checkbox>
  </v-row>
  <v-checkbox v-else :label="index" v-model="Uncheck" disabled ></v-checkbox>
</v-col>

data() {
  return {
    Check: true,
    Uncheck: false,
  }
}

And what it looks like:

But I want first and third checked and the others unchecked.

PS: Sorry for the explanation I am new to this.

Answer 1

i think you made a mistake in condition

it should not v-if="value = True", it should be v-if="value" or v-if="value == true"

<v-col md="3" v-for="(value, index) in getSingleUser.abilities" :key="index" :value="value">
  <v-row>
    <v-checkbox v-if="value" :label="index" v-model="Check" disabled ></v-checkbox>
  </v-row>
  <v-checkbox v-else :label="index" v-model="Uncheck" disabled ></v-checkbox>
</v-col>

but surely you can optimize your code block. but i just gave answer of the problem