Vue - 无法在承诺中设置未定义的属性

Question

所以我有以下 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>

这编译得很好，但是，在加载网页时，我收到以下错误：

app.js:1769 Uncaught (in promise) TypeError: Cannot set property 'message' of undefined

我也尝试过创建另一种方法，但没有任何乐趣。我似乎无法弄清楚为什么在这里无法访问this。

Answer 1

你的上下文正在改变：因为你使用了关键字function，this 在它的作用域内是匿名函数，而不是 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);
        });

    },

注意：顺便说一句，您应该继续使用关键字 function 作为您的方法的顶级（如示例所示），否则 Vue 不能t 将 vue 实例绑定到this。

Answer 2

可以在代码块外将this 设置为const，并使用该常量值访问类属性。

即

const self = this;

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

Answer 3

还有另一个常见原因，我一直在想为什么您会收到此错误消息。如果你使用 v-if 而不是 v-show 来隐藏一个项目，它不会在 DOM 中，最初不会加载，也不会被引用。我花了一段时间才弄清楚为什么会出现上面的错误消息：

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

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

Answer 4

在promise中使用箭头函数然后你可以访问'this'对象。

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

    }

Answer 5

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)
// }

}

Answer 6

我们需要使用 shorthand 属性来定义方法。例如

export default {
  name: "Posts",
  data() {
    return {
      posts: [],
    };
  },
  methods: {
    async fetchPosts() {
      this.posts = await fetch("http://jsonplaceholder.typicode.com/posts")
          .then(x => x.json())
          .catch(e => console.error(e));
    }
  },
  created() {
    this.fetchPosts();
  }
}