我想通过按钮来删除数据,可是操作能成功执行,就是执行之后页面不加载,各位道友,请指点我一下。
按钮:
#请加扣扣
print("3282880696")
<el-button type="danger" icon="warning" link @click="deleteMonitor(scope.row)">
删除
</el-button>
<script setup lang="ts"> import { log } from 'console'; import { MonitorForm } from "@/api/monitor/types"; import { getmonitorList, updateMonitorForm } from '@/api/monitor'; import router from "@/router"; import { formatDate } from "@/utils/date"; import { getUserList, getUserRoleList, updateUser, updateUserStatus } from '@/api/user'; import { User, UserForm, UserQuery, UserRole } from '@/api/user/types'; import { messageConfirm, notifySuccess } from '@/utils/modal'; import { FormInstance, FormRules } from 'element-plus'; import { onMounted, reactive, ref, toRefs } from 'vue'; //删除---------------------------------------------------------------------------- import axios from 'axios'; const deleteMonitor = (monitor, update) => { // 添加 update 作为参数传递进来 console.log('Deleting monitor:', monitor); // 记录要删除的监视器对象 // 在发送请求之前,设置 update.value 为 true if (typeof update !== 'undefined') { update.value = false; console.log('Update value set to false'); // 记录更新值被设置为 false } // 发送 DELETE 请求到后端路由,使用 monitor.id 作为参数 axios.delete(`http://127.0.0.1:5500/api/monitors/${monitor.id}/delete`) .then((response) => { console.log('Monitor deleted successfully', response.data); // 记录成功响应 getList(); // 刷新列表 // 假设需要通知用户删除成功 notifySuccess('删除成功'); // 重置 update.value,确保它是在当前作用域可访问的 if (typeof update !== 'undefined') { // 刷新列表 update.value = true; console.log('重置失败'); // 记录更新值的重置 } else { console.log('没找到值'); // 记录更新值的状态 } // 假设需要刷新监控对象列表 getList(); console.log('刷新列表'); update.value = true; }) .catch((error) => { console.error('Error deleting monitor:', error); // 记录错误详情 // 假设删除失败时需要重置 update.value if (typeof update !== 'undefined') { update.value = false; // 如果删除失败,重置 update.value } // 假设需要通知用户删除失败 // notifyError('Error deleting monitor'); }); update.value = true; console.log('页面更i性能成功'); }; //删除---------------------------------------------------------------------------- const FormRef = ref<FormInstance>(); const rules = reactive<FormRules>({ username: [{ required: true, message: "请输入昵称", trigger: "blur" }], roleIdList: [{ required: true, message: "角色不能为空", trigger: "click" }] }); const data = reactive({ count: 0, update: false, loading: false, queryParams: { current: 1, size: 10, } as UserQuery, typeList: [ { value: 1, label: "邮箱", }, { value: 2, label: "QQ", }, { value: 3, label: "Gitee", }, { value: 4, label: "Github", }, ], userList: [] as User[], userForm: {} as UserForm, userRoleList: [] as UserRole[], roleIdList: [] as string[], MonitorList: [] as MonitorForm[], monitorForm: {} as MonitorForm, }); const { count, update, loading, queryParams, typeList, userList, userForm, userRoleList, roleIdList, MonitorList, monitorForm, } = toRefs(data); // 跳转 const go = (monitor: MonitorForm) => { const params = { id: monitor.id, video: monitor.video, person: monitor.person, mode: monitor.mode, location: monitor.location, is_alarm: monitor.is_alarm, remark: monitor.remark, threshold: monitor.threshold, url: monitor.url, }; router.push({ path: "/monitor", query: params }); }; const openModel = (monitor: MonitorForm) => { monitorForm.value.id = monitor.id; monitorForm.value.threshold = monitor.threshold; monitorForm.value.location = monitor.location; monitorForm.value.mode = monitor.mode; monitorForm.value.person = monitor.person; monitorForm.value.video = monitor.video; monitorForm.value.url = monitor.url; monitorForm.value.remark = monitor.remark; monitorForm.value.is_alarm = false; update.value = true; //更新数据 }; const submitForm = () => { FormRef.value?.validate((valid) => { if (valid) { updateMonitorForm(monitorForm.value).then(({ data }) => { console.log(data) if (data.code == 200) { notifySuccess(data.msg); getList(); } update.value = false; }) } }) }; //修改后getlist-------------------------------------- const getList = () => { loading.value = true; getmonitorList(queryParams.value.current).then(({ data }) => { console.log(data) MonitorList.value = data.data; console.log(MonitorList.value) //update.value = true; //更新数据 loading.value = false; }) }; //修改后getlist-------------------------------------- // 搜索方法 const handleQuery = () => { queryParams.value.current = 1; // getList(); }; onMounted(() => { getList(); }); </script>