Question

如何修复未捕获（在承诺中）TypeError：无法设置未定义的属性

2021-01-19

20211

nuxt.js

当我想将 API 结果中的值发送到数据时出现错误，错误如下

Uncaught (in promise) TypeError: Cannot set property 'notification' of undefined at eval (HeaderPortal.vue?070f:367)

这是我的 HeaderPortal.vue

data() {
  return {
    notification: []
  }
}

mounted: {
  const res = this.GET('/api/v2/notification', 'BEARER', null).then(function(res) {
     console.log(JSON.parse(res))
     this.notification = JSON.parse(res);
  });
}

this.GET 来自这里

methods: {
  async GET(url, headers, callback) {
    const options = headers === 'BASIC' ? HEADERS_BASIC : HEADERS_BEARER;
    try {
      const response = await axios.get(`${BASE_URL}${url}`, options);
      return (JSON.stringify(response));
    } catch (e) {
      console.error(e);
    }
  }
}

如何处理？我的代码有问题吗？

Answer 1

如果您需要访问 this 关键字，请确保在回调中使用箭头函数 () => { 而不是常规函数 function() { 。如果不这样做， this 关键字在您的情况下将为 undefined 。这就是您在第一个代码片段中尝试设置 this.notification = JSON.parse(res); 时出现错误的原因。

您的第一个代码片段有点奇怪，也许您忘记复制某些内容了？您的代码不应直接位于方法对象内。它应该位于已安装的钩子中，或者位于第二个代码片段中的正确方法中。

Answer 2

答案不太清楚，让我举例说明一下：

data() {
      return {
        notification: []
      }
    }
    methods: {
        const res = this.GET('/api/v2/notification', 'BEARER', null).then( res =>  {
          console.log(JSON.parse(res))
          this.notification = JSON.parse(res);
        });
    }

希望有用

Answer 3

内部函数中的

this 仅引用该函数，因此不起作用。相反，请写：

s=this;
const res = this.GET('/api/v2/notification', 'BEARER', null).then( 
function(res) {
      console.log(JSON.parse(res))
      s.notification = JSON.parse(res);
    });
}