时间戳

首页 > 解决方案 > 有数据时禁用复选框

vue.js - 有数据时禁用复选框

问题描述

我正在研究一个 vue js，当有一个数据等于问题时，我试图禁用复选框，但是当我在 div 元素中控制台记录问题时== 'Skin Allergies/Irritation'有一个v-if ="issue.issue == 'Health Condition'它会返回一个false但我的数据库中已经有数据

 <section>
     <el-collapse v-model="activeIssue" accordion>
         <el-collapse-item :title="issue.issue == 'Health Condition' ? $helper.capitalize(issue.issue) : 'Informed Consent for ' + $helper.capitalize(issue.issue)" :name="issue.id" v-for="(issue, index) in dataForm.health_issues" :key="index">
             <div v-if="!!issue.url || !issue.issue == 'Health Condition'">
                 <el-image :src="issue.url" style="width: 100%;"></el-image>
             </div>
             <div v-if ="issue.issue == 'Health Condition'" v-loading="loading">
             <div style="margin: 0 0 15px; text-align: left; padding: 10px 30px">
             <div class="-checkbox-div">
                 <el-checkbox :disabled="issue.issue == 'Skin Allergies/Irritation' " v-model="skin" class="-checkbox">Skin Allergies/Irritation </el-checkbox>
                 <span v-if="skin" class="-upload-mc">
                     <el-link type="success" :underline="false" @click="uploadCert('Skin Allergies/Irritation')">
                         Upload medical certificate
                         <i class="el-icon-circle-check el-icon--right" v-if="checkIssue('Skin Allergies/Irritation')"></i>
                     </el-link>
                 </span>
             </div>
         </el-collapse-item>
     </el-collapse>
 </section>

有没有一种方法可以在我已经有一个数据试图使用它时禁用该复选框：已禁用但在具有 v-if 它只返回 false 的 div 内部

标签： vue.js

解决方案

这条线有问题

<div v-if="!!issue.url || !issue.issue == 'Health Condition'">
     <el-image :src="issue.url" style="width: 100%;"></el-image>
</div>

您正在issue.issue( !issue.issue) 上调用车削操作，将其转换为布尔值。它返回truthy，因为"Skin Allergies/Irritation"它是truthy（而空字符串是falsy）。取它的相反值就可以了false。

这意味着您正在比较!true == 'Health Condition'哪个成为false == 'Health Condition'. 本质上，您是在比较false == true. 这反过来又使您的 or 子句本质!!issue.url上!issue.issue == 'Health Condition'总是错误的。

因此，如果你删除!你的v-if它实际上会比较字符串的值

<div v-if="issue.url || issue.issue == 'Health Condition'">
     <el-image :src="issue.url" style="width: 100%;"></el-image>
</div>

您还应该删除!!前面的，因为在执行逻辑时issue.url它已经被转换为布尔值

推荐阅读