[Vuejs]-If else condition in v-for with v-checkbox using Vuetify

by

0👍

✅

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

0👍

<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.

Leave a comment