VueJs：如何将当前迭代的项目传递给对话框？

1 回答

• 1

  在Vue实例上定义方法 deleteUser(user) 并使用 splice 方法从特定索引位置的数组中删除项目 .

  您只需通过在视图模板中的v-for中引用其名称来传递 user 变量 .

  Here您已经编辑了您的codepen，以便在您点击某个项目后支持删除 .

  PS . 考虑为每个 user 添加唯一 id ，然后执行仅传递 id 的操作，而不是整个 user 对象 .

  编辑：

  我建议使用像vuejs-dialog这样的第三方库来删除用户之前显示警报 . 配置库非常简单，只需按照README进行操作即可 .

  然后您的 deleteUser 方法可能如下所示：

  deleteUser(user) {
     this.$dialog.confirm('Do you want to delete a user?')
      .then(dialog => {
          console.log('Clicked on proceed')
          const index = this.users.indexOf(user);      
          this.users.splice(index, 1); 
      })
      .catch(() => {
          console.log('Clicked on cancel')
      });
  
  }
  

  回复于 2024-04-20T02:59:30+08:00