vue ant design message 验证失败后的显示效果

Question

问题描述

想在登录验证失败后显示 message 提示，如何更方便（优雅）的调用呢

问题出现的环境背景及自己尝试过哪些方法

使用的是 vue 和 ant design
目前的代码是成功显示的，在 catch 中的原本是 this，后看了一些博客说用 此时的 this 不是 vue，所以在外面声明了一个变量 vm 来代替，这样就可以成功显示了

此外，我还想在 login 方法中调用外面的 warn 方法，也失败了，报错信息

Uncaught (in promise) TypeError: Cannot read property '$options' of undefined
    at eval

不太理解为什么

相关代码

methods: {
      login() {
        var vm = this;
        this.form.validateFields(
          (err) => {
            if (!err) {
              // 验证成功

              let data = {
                "username": this.form.getFieldValue("username"),
                "password": this.form.getFieldValue("password")
              };

              this.axios
                .post(this.CTX + '/api/login', data)
                .then((r) => {
                  this.router.push("/")
                  // vm.$message.warning('This is message of warning');
                })
                .catch(function (error) {
                  // alert("error");
                  vm.$message.warning('This is message of warning');
                  // this.$options.methods.warning();
                });


            } else {
              // 验证失败
            }
          },
        );
      },
      warning() {
        this.$message.warning('This is message of warning');
      }
    },

你期待的结果是什么？实际看到的错误信息又是什么？

1. 去掉 vm，能够优雅的调用 message