Question

Vue.js 中有一个方法不起作用，我找不到问题所在

2021-05-17

853

vue.js

从下面的代码中，我使用 EmailJs 库发送电子邮件，提交后会执行 alert 方法，但不会执行 change 方法。我遗漏了什么？

控制台上的错误消息是

Uncaught (in promise) TypeError: Cannot read property 'change' of undefined
        at app.js:2755

我的脚本

<script>
    import emailjs from "emailjs-com";
    
    export default {
      data() {
        return {
          flash: false,
        };
      },
    
      methods: {
        sendEmail: (e) => {
          emailjs
            .sendForm(
              "service_k9mhh",
              "template_epghgfh",
              e.target,
              "user_w9U76tg77yhcggh"
            )
            .then(
              (result) => {
                console.log("SUCCESS!", result.status, result.text);
                alert("Message Sent Successfully")
                this.change();
                
              },
    
              (error) => {
                console.log("FAILED...", error);
              }
            );
        // Reset form field
         
        },
        change(){
          this.flash = true;
        }
       
      },
    };
    </script>

如果没有如下所示的箭头函数，它仍然会抛出相同的错误。

methods: {
    sendEmail: function (e) {
      emailjs
        .sendForm(
          "service_",
          "template_",
          e.target,
          "user_"
        )
        .then(
          function (result) {
            console.log("SUCCESS!", result.status, result.text);
            this.change();
          },

          function (error) {
            console.log("FAILED...", error);
          }
        );
      
    },
    change: function () {
      this.flash = true;
    }

Answer 1

问题在于箭头函数中的 this 不引用 Vue 实例，因此 this.change 未在此处定义。

阅读此内容： https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods

Answer 2

好的，所以你和 eldo 都说对了一半。声明方法时，你需要使用常规函数语法，并在任何嵌套的 .then 中使用箭头函数。在 then 和 catch 处理程序中使用箭头函数可确保“this”仍然是对 Vue 实例的引用。

你的方法应该看起来像这样：

sendEmail(e) {
  emailjs
    .sendForm("service_", "template_", e.target, "user_")
    .then((result) => {
      console.log("SUCCESS!", result.status, result.text);
      this.change();
    })
    .catch((error) => {
      console.log("FAILED...", error);
    });
},