vue中呼叫問題

蜗牛使劲冲發表於2024-07-08
Vue

** 背景

我vue專案methods裡面有三個方法，A方法，B方法，C方法，我在執行A方法裡面呼叫B方法，B方法裡面呼叫C方法，就報錯了，說TypeError: Cannot read properties of undefined, 這個nextHandleSubmit方法沒有被定義，這是為什麼？

經過問gpt，結果竟然是：

在上述程式碼中，箭頭函式內部的this指向的是箭頭函式被定義時的上下文，而不是方法verifyCheckCode的例項。因此，當你在箭頭函式內部呼叫this.nextHandleSubmit()時，this指向的是箭頭函式的上下文，而不是Vue例項，導致無法呼叫nextHandleSubmit方法。

原文：

 axios
    .post(verifyCheckCodeUrl, formData, {
      headers: {
        'Content-Type': 'multipart/form-data', // 設定請求頭
      }
    })
    .then(function (data) {
      var d = data.data;
      if (d.code === 200) {
        console.log("here!")
        // todo 處理token？
        this.nextHandleSubmit()
      }else{
        message('手機驗證碼驗證失敗');
      }
    })
    .catch((error) => {
      console.log('verifyCheckCode error: ', error);
    });
},

修改如下：

axios
  .post(verifyCheckCodeUrl, formData, {
    headers: {
      'Content-Type': 'multipart/form-data', // 設定請求頭
    }
  })
  .then( (data) => {   //！！！這邊改了！！！！
    var d = data.data;
    if (d.code === 200) {
      // todo 處理token？
      this.nextHandleSubmit()
    }else{
      message('手機驗證碼驗證失敗');
    }
  })
  .catch((error) => {
    console.log('verifyCheckCode error: ', error);
  });

相關文章