如果使用 Vuetify 在 v-for 和 v-checkbox 中使用其他条件

Question

我正在尝试创建一个条件，其中循环遍历对象并显示一些复选框，当属性的值为 true 时选中复选框，当值为 false 时取消选中复选框。必须禁用复选框。

我的对象是：

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

我试过的是：

<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,
  }
}

它的样子：

但我想勾选第一个和第三个，其他不勾选。

PS：抱歉，我是新手。

Answer 1

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

您不需要 :value="value" v-col。 v-for 中的变量 value 可用于 v-for 及其所有子项。

您只需要一个复选框。复选框不需要 v-model 因为它总是被禁用（你不需要双向编辑）因此 :value 属性会很好。

Answer 2

我认为你的条件有误

它不应该 v-if="value = True"，它应该是 v-if="value" 或 v-if="值==真"

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

但您肯定可以优化您的代码块。但我刚刚给出了问题的答案

如果使用 Vuetify 在 v-for 和 v-checkbox 中使用其他条件

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

javascript

vue.js

vue-component

v-for

vuetify.js