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

Answer 2

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

You do not need :value="value" on the v-col. The variable value from the v-for is available on the v-for and all its children.

You just need one checkbox. The checkbox does not need a v-model since it is always disabled (you don't need two-way editing) therefore :value attribute will do fine.