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

Posted 2023-02-23

【中文标题】如果使用 Vuetify 在 v-for 中使用 v-checkbox 进行其他条件

【英文标题】：If else condition in v-for with v-checkbox using Vuetify

【发布时间】：2021-06-08 21:52:46

【问题描述】：

我正在尝试创建一个条件，即循环遍历一个对象并显示一些复选框，当属性的值为 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：对不起，我是新手。

【参考方案1】：

我认为你的条件有误

不应该是v-if="value = True"，应该是v-if="value"或者v-if="value == 真”

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

但您当然可以优化您的代码块。但我只是给出了问题的答案

【参考方案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>

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

您只需要一个复选框。该复选框不需要 v-model，因为它始终处于禁用状态（您不需要双向编辑），因此 :value 属性就可以了。

【讨论】：

我想你误会了我。我希望所有复选框都被禁用，但第一个和第三个复选框被选中并禁用，而其他复选框则具有未选中和禁用的错误值。