如何在Vue中将变量从deleteUser方法传递到onConfirm方法？

问题背景 #

原本用原生confirm弹窗的删除逻辑能正常运行，现在要切换为toast组件实现更友好的确认界面，需把操作拆成onConfirm和onReject方法，但不知道怎么把deleteUser里的user变量传递给onConfirm。

旧代码（可正常运行） #

deleteUser(user) {
  if (confirm("Are you sure you want to delete: " + user.name + "?")) {
    this.working = true;
    axios.delete('/teachers/' + user.id)
      .then(this.onTeacherDeleted(user)) // 注：此处存在逻辑问题，会立即执行onTeacherDeleted，而非请求成功后执行
  }
  // this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Are you sure you want to delete this placement?', group: 'bc'});
},

onTeacherDeleted(user) {
  this.$toast.add({
    severity:'success', 
    summary: user.name + 'Deleted Successfully', 
    detail:'The teacher was successfully delted from the database', 
    life: 3000
  });
  window.location.reload()
}

新代码当前问题 #

deleteUser触发toast后，onConfirm拿不到要删除的user变量，且按钮点击事件未正确传递参数，同时axios回调仍存在立即执行的问题。

deleteUser(user) {
  this.$toast.add({
    severity: 'warn', 
    summary: 'Are you sure?', 
    detail: 'Are you sure you want to delete this placement?', 
    group: 'bc'
  });
},

onConfirm(user) {
  this.$toast.removeGroup('bc');
  this.working = true;
  axios.delete('/teachers/' + user.id)
    .then(this.onTeacherDeleted(user)) // 同样存在立即执行的问题
},

onReject() {
  this.$toast.removeGroup('bc');
}

<button class="btn border border-success rounded-3" type="button" @click="onConfirm" this.onTeacherDeleted(user) aria-expanded="false">
<button class="btn border border-danger rounded-3" type="button" @click="onReject" aria-expanded="false">

解决方案 #

通过组件实例存储当前要删除的用户，确保onConfirm能获取到变量，同时修复axios回调的执行时机问题：

1. 在组件data中添加存储变量

data() {
  return {
    // 其他原有变量...
    currentDeleteUser: null // 用于临时存储当前要删除的用户
  }
}

2. 修改deleteUser方法，保存用户到实例变量

deleteUser(user) {
  this.currentDeleteUser = user; // 把要删除的用户存到实例变量中
  this.$toast.add({
    severity: 'warn',
    summary: '确认删除？',
    detail: `确定要删除用户 ${user.name} 吗？`, // 显示用户名更直观
    group: 'bc'
  });
}

3. 修改onConfirm方法，使用实例存储的用户

onConfirm() {
  const user = this.currentDeleteUser;
  if (!user) return; // 防止无用户时误操作
  
  this.$toast.removeGroup('bc');
  this.working = true;
  axios.delete(`/teachers/${user.id}`)
    .then(() => this.onTeacherDeleted(user)); // 用箭头函数确保回调在请求成功后执行，同时保留this指向和user变量
}

4. 修正按钮代码，移除无效内容

<button class="btn border border-success rounded-3" type="button" @click="onConfirm" aria-expanded="false">确认删除</button>
<button class="btn border border-danger rounded-3" type="button" @click="onReject" aria-expanded="false">取消</button>

5. 优化onTeacherDeleted方法（可选）

onTeacherDeleted(user) {
  this.$toast.add({
    severity:'success',
    summary: `${user.name} 删除成功`,
    detail: '该用户已成功从数据库移除',
    life: 3000
  });
  // 推荐用Vue响应式更新列表，而非强制刷新页面
  // 例如：this.teachers = this.teachers.filter(item => item.id!== user.id);
  window.location.reload();
}

内容的提问来源于stack exchange，提问作者Jac Phillipps