el-button 的:disabled不生效

最新推荐文章于 2024-05-27 14:46:49 发布

zhaocarbon

最新推荐文章于 2024-05-27 14:46:49 发布

阅读量5.9k

点赞数 15

文章标签：数学建模 servlet

本文链接：https://blog.csdn.net/yunhuaikong/article/details/130958741

版权

在Vue.js应用中，一个包含三个按钮的页面组件根据业务逻辑切换不同状态时，中间按钮的禁用状态失效。通过为每个按钮添加唯一key属性，成功解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的页面里面有三个按钮，根据业务逻辑显示切换不同的状态。

<div class="add-project-footer bg-white line-top text-right" v-if="active != 3">
    <template v-if="toEditDetail">
        <el-button type="primary" @click="saveDetailAction">保存</el-button>
    </template>
    <template v-else>
        <el-button  @click="preStep" v-if="active != 1">上一步</el-button>
        <el-button  :loading="showLoading" type="primary" @click="nextStep" :disabled="nextBtnDisabled">{{ active===2?'完成创建':'下一步' }}</el-button>
        <el-button  @click="goBack" v-if="active == 1">取消</el-button>
    </template>
</div>

结果切换时，中间按钮的禁用状态无效了！！

如何解决呢？

添加:KEY=''，给个唯一值即可！！

<div class="add-project-footer bg-white line-top text-right" v-if="active != 3">
    <template v-if="toEditDetail">
        <el-button type="primary" @click="saveDetailAction">保存</el-button>
    </template>
    <template v-else>
        <el-button :key="1" @click="preStep" v-if="active != 1">上一步</el-button>
        <el-button :key="2" :loading="showLoading" type="primary" @click="nextStep" :disabled="nextBtnDisabled">{{ active===2?'完成创建':'下一步' }}</el-button>
        <el-button :key="3" @click="goBack" v-if="active == 1">取消</el-button>
    </template>
</div>

瞬间内心一万个操泥马飘过。。。