前端问题集（2）：Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败。

淩亂°似流年 2022-10-10 06:11 11阅读 0赞

# 一、问题说明 #

Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败，提示是该方法未定义。

# 二、解决方法 #

在确认框中用到的当前作用域时，this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。

onChange(e, record) {
          //确认框中用到的当前作用域this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。
          let self = this
          this.$confirm({
            title: "确认修改此用户的状态信息？",
            //自定义按钮内容
            okText: "确认",
            cancelText: "取消",
            onOk() {
              let values;
              //根据开关状态初始化，传入后台的值
              if(e){
                values = {id:record.id,status:1}
                record.status=1
              }else{
                values = {id:record.id,status:0}
                record.status=0
              }
              //调用后台方法修改用户状态
              axiosPostApi("/api/system/updateUserStatus", values).then((resp) => {
                if (resp.code == 200) {
                  //重点内容：根据修改后的信息，调整前端数据集中的数据内容，这样就不用重新请求后台数据了。实现无刷新更新数据
                  self.$set(self.userData, self.userData.indexOf(record), record)    
                }
              });
            },
            onCancel() {},
          });
        },