记一次浏览器debugger无法触发的问题

背景

工作中要做一个按钮隐藏的逻辑,当系统当前时间减去数据的创建时间大于用户配置的失效时间后按钮隐藏。由于按钮的disabled属性原本就有两个条件来控制,增加第三个条件后逻辑就有点太复杂,不适合直接写在属性后,于是就想用计算属性来实现,这时候又遇到一个问题,这几个判断条件都用到了父元素传递的数据,因此也必须要通过computed传参。通过多方查询,使用了在computed中返回函数的方式传参。一切问题都解决了,就看最后结果了。在computed中用debugger打断点,看看当前时间改变后computed是否能触发,结果一看一个不出声,debugger不论怎么写浏览器都执行不到,没有效果。奇了怪了!反复检查浏览器的控制台,也没有选择取消监听debugger按钮啊。于是怀疑是不是代码哪里写的不正确,导致computed不触发。反复检查,确定没什么问题。后来在mounted中打断点,发现也无法触发,终于发现端倪,然后上网搜索,查到说是需要再控制台的setting中取消勾选忽略列表中的某项。果然取消后,debugger就监听到了。耗费了半个多小时,原来是这么简单的问题。奇怪的是我从来没有设置过这个配置,为什么突然就不行了?深层原因没有细究,问题是解决了,逻辑没问题,一切正常跑通。

代码

<template>
	<Table :data="reportList" height="100%" border>
		<TableColumn prop="FileName" label="文件名" />
		<TableColumn label="确认人">
			<template #default="{row}">
				{{row.ConfirmName}}
			</template>
		</TableColumn>
		<TableColumn label="操作" width="140px">
			<template #default="{row}">
				<!-- <Button size="mini" type="success" :disabled="!!row.ConfirmName || row.TriggerType == 4 || (new Date()).getTime() - (new Date(row.TriggerTime)).getTime() > confirmWaitTime * 60 * 1000" @click="confirm(row.ID)">确认</Button> -->
				<!-- <Button size="mini" type="success" :disabled="false || false || (new Date()).getTime() - (new Date(row.TriggerTime)).getTime() > confirmWaitTime * 60 * 1000" @click="confirm(row.ID)">确认</Button> -->
				<!-- 关键代码 -->
				<Button size="mini" type="success" :disabled="isButtonDisabled(row)">确认</Button>
				<Button size="mini" type="primary" @click="selectExcel(row.Guid)">查看</Button>
			</template>
		</TableColumn>
	</Table>
</template>

js代码

export default {
	data(){
		return {
			confirmWaitTime:window.confirmWaitTime,
			currentTime:(new Date()).getTime()
		}

	},
	mounted() {
		this.updateCurrentTime();
		setInterval(this.updateCurrentTime, 1000); // 每秒更新一次
	},
	components: {
		Table, 
		TableColumn,
		Button
	},
  name: "ReportList",
  model: {
    prop: "selectedReportId",
    event: "change",
  },
  props: {
    selectedReportId: String,
  },
  computed: {

		isButtonDisabled() {
			return (row) => {
				let createTime = (new Date(row.TriggerTime)).getTime();
				return row.TriggerType === 4 || !!row.ConfirmName || this.currentTime - createTime > this.confirmWaitTime * 60 * 1000;
			};
    },
  },
  methods: {

    updateCurrentTime() {
      //console.log("updateCurrentTime",this.currentTime);
      this.currentTime = (new Date()).getTime();
    },

  },
};

控制台需要取消勾选的配置

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值