项目中根据状态条件来显示删除按钮时遇到的问题

时间:2021-08-07 22:12:41

在项目中遇到这样一个问题,如下图:
项目中根据状态条件来显示删除按钮时遇到的问题
只有当状态是‘已关闭’的时候才会显示删除按钮
开始用的方法是这样的

<div title="删除" style="cursor: pointer;width: 30px;text-align: center;font-size:20px;" class="fr task-delete" v-if="issueDatas.state==5">
<i class="fa fa-trash-o" @click="del(issueDatas.id)"></i>
</div>

控制按钮显示的条件是issueDatas.state==5;这样导致的一个问题就是
在修改时,只要点击了下拉框选择了‘已关闭’,这时还没有执行保存,但是删除按钮就会显示出来,那么就可以执行删除操作,这个逻辑是错误的,应该在改变了状态以后先保存,把数据传到后台保存后,才能执行删除的动作,解决这个问题的方法是使用watch监听this.issueDatas.state,

watch:{
issueDatas:function(){
if(this.issueDatas.state==5){
this.delbtnShow=true;
};
}
}

这个方法可以解决第一个问题,但是缺点是,当点击了一条‘已关闭’的数据关闭以后,再点开其他状态的一条数据,比如是‘进行中’,这时那个删除按钮也会出现在这条进行中的数据中,这是不允许的,只有在已关闭的数据中才能进行删除操作,这2种方法各有优缺点,解决的这2个问题的方法就是把这2个方法结合起来使用

<div title="删除" style="cursor: pointer;width: 30px;text-align: center;font-size:20px;" class="fr task-delete" v-    if="delbtnShow&&issueDatas.state==5">
<i class="fa fa-trash-o" @click="del(issueDatas.id)"></i>
</div>

删除按钮显示的条件改成delbtnShow&&issueDatas.state==5,那么就会解决这2个问题