Javascript Vue-无法在promise中设置未定义的属性

因此，我有以下Vue文件：

<template>

  <li class="notifications new">
      <a href="" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <sup>
          <span class="counter">0</span>
          </sup>
       </a>
       <div class="dropdown-menu notifications-dropdown-menu animated flipInX">
            <ul v-for="notification in notifications" @click="" class="notifications-container">
              <li>
                <div class="img-col">
                  <div class="img" style="background-image: url('assets/faces/3.jpg')"></div>
                </div>
              </li>
            </ul>
        </div>
  </li>

</template>

<script>
export default {

    data: function() {
        return {
          notifications: [],
          message: "",
        }
    },

    methods: {

        loadData: function() {
            Vue.http.get('/notifications').then(function(response) {

                console.log(response.data);
                //this.notifications = response.data;
                //this.notifications.push(response.data);

                this.message = "This is a message";

                console.log(this.message);
            });

        },
    },

    mounted() {
        this.loadData();
    },

}

</script>

导出默认值{
数据：函数（）{
返回{
通知：[]，
消息：“”，
}
},
方法：{
loadData:function（）{
Vue.http.get（'/notifications'）。然后（函数（响应）{
console.log（response.data）；
//this.notifications=response.data；
//这是.notifications.push（response.data）；
this.message=“这是一条消息”；
console.log（this.message）；
});
},
},
安装的（）{
这是loadData（）；
},
}

这很好，但是，在加载网页时，出现以下错误：

app.js:1769未捕获（承诺中）类型错误：无法设置未定义的属性“message”

---

我也尝试过创造另一种方法，但没有乐趣。我真的不明白为什么

这个
不能在这里访问
 您的上下文正在更改：因为您正在使用关键字函数，
此
在匿名函数的范围内，而不是vue实例

改用箭头函数

  loadData: function() {
        Vue.http.get('/notifications').then((response) => {

            console.log(response.data);
            //this.notifications = response.data;
            //this.notifications.push(response.data);

            this.message = "This is a message";

            console.log(this.message);
        });

    },

NB:顺便说一句，您应该继续在方法的顶层使用关键字函数（如示例所示），因为否则Vue无法将Vue实例绑定到
此
还有另一个常见原因，我一直在想为什么您会收到此错误消息。如果使用v-If而不是v-show来隐藏项目，则该项目将不在DOM中，最初不会加载，也不可引用。我刚刚花了一段时间研究了为什么会出现上面的错误消息：

vm.$refs.refpersonview.Person = ...

原因是我有条件地将组件隐藏在v-if块中。改用v-show

created() {
pipedrive.getAllDeals()
.then(response => {
  // JSON responses are automatically parsed.
  this.posts = response.data
})
.catch(e => {
  this.errors.push(e)
})

// async / await version (created() becomes async created())
//
// try {
//   const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
//   this.posts = response.data
// } catch (e) {
//   this.errors.push(e)
// }

}
在promise中使用箭头功能，然后您可以访问“this”对象

loadData: function() {
        Vue.http.get('/notifications').then(response => {
            console.log(response.data);
            //this.message = 'Something'
        });

    }

可以将
this
设置为代码块外部的
const
，并使用该const值访问类属性

即

我不知道如何使用http，因为我正在使用axios，但您可以尝试让that=this；Vue.http.get（）{that.message=“这是一条消息”；}@GerardoRosciano嗨，不。。。仍然得到同样的回应：（您正在使用Vue资源吗？看起来您正在使用Vue资源。如果您正在使用，那么除了下面的答案之外，使用
this.$http.get
而不是
Vue.http.get
也可以解决问题。谢谢。但是，这似乎只适用于字符串。我有一个数组返回，well object.
response.da.）ta
给我
对象，对象，对象
而
this.notifications=response.data；console.log（this.notifications）
给
对象{
？“观察者”在VueJS中是正常的，它们附加到数据对象中的每个属性，这是VueJS跟踪更改并立即更新的一种方式@Phorce Suggestion use Vue Devtools chromeextension@BelminBedak有没有一个教程或者什么我可以实现我想要做的事情？我似乎在这个问题上找不到任何东西您希望在上实现什么？您确定通知响应包含任何数据吗？正如建议的Vue Devtools将对您有很大帮助，您可以查看数据模型中的每个属性包含哪些内容@Phorce@BelminBedak-我想基本上调用API，然后获取数据并将其显示在列表中。
response.data
contAIN3对象..
0:Object{message:“欢迎使用应用程序”}
等。请详细解释解决方案，以便其他人更容易理解。您可以尝试使用箭头功能。是否有更多解释？
const self = this;

blockMethod(function(data) {
    self.prop = data.val();
})