Javascript Vue.js+；axios=数据未更新

我是Vue.js的新手，我试图解决一个看起来太奇怪的问题（至少对我来说）

我有以下代码：

import Vue from 'vue/dist/vue.js';
import axios from 'axios';

import './components/top-line';

new Vue(
  {
    el      : '#weatherWidget',
    data : {
      loading : false,
      error: '',
      current : null,
      daily   : null,
    },
    created : () => {
      let self = this;
      let form_data = new FormData();
      form_data.append( 'action', 'weather_request' );
      form_data.append( 's', window.vue_weather.s );

      self.loading = true;
      self.error = '';

      axios
        .post( window.vue_weather.ajax_url, form_data )
        .then(
          response => {
            let data = response.data;
            self.current = data.data.currently;
            self.daily   = data.data.daily.data;
            self.loading = false;

            console.log( self );
          }
        )
        .catch(
          error => {
            this.error = error;
          }
        );
    },
  }
);

当执行创建的

方法时，我可以在控制台中看到以下输出：


但Vue控制台似乎是这样的：


因此，当创建的
正常执行时，
Vue
数据不更新

你认为我做错了什么吗？不幸的是，我看不出有什么不对劲

为了解决这个问题，有什么解决方案或想法吗

注释


AJAX请求返回数据
我也尝试了
this
而不是
let self=this

问题在于，您正在创建的
钩子中使用箭头函数

你可以在

不要在选项属性或回调上使用箭头函数，例如
created:（）=console.log（this.a）
或
vm.$watch（'a'，newValue=>
这个.myMethod（））
。因为箭头函数绑定到父函数
上下文中，
此
通常不会像您预期的那样成为Vue实例
导致错误，例如
uncaughttypeerror:无法读取属性
未定义的
或
未捕获类型错误：此.myMethod不是
功能

你可以使用

created() {

或

不要对创建的钩子使用箭头函数。使用
created（）{
或
created:function（）{
。请看@JacobGoh谢谢你的回答。最后，这解决了问题。但为什么会这样？如果你愿意，你能回答吗？我可以投票支持你的答案，因为这解决了我的问题。再次感谢：）哇，很好地抓住了Jacob，很容易错过那一个。这是一个有趣的问题，也是你的答案。谢谢。谢谢@JacobGoh。你解决了我的问题！！：）你是最棒的；）
created : function() {