TypeError：无法设置未定义的属性'posts'-Vuejs

Question

我使用VueJs和Laravel创建SPA。我通过api laravel和axio响应获得了所有帖子的主页数据对象。但是我无法更新到职位属性。

• chrome调试工具错误：

我在Wellcome.vue中的代码

import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
  name: 'welcome',

  layout: 'default',

  metaInfo: { titleTemplate: 'Welcome | %s' },

  computed: mapGetters({
    authenticated: 'authCheck'
  }),

  data: () => ({
    title: 'Demo Blog',
  }),
  props: {
      posts: {
        type: Object
      }
  },
  created () {
    axios.get('/api/posts')
    .then(function (response) {
      this.posts = response.data;
    })
    .catch(function (error) {
      console.log(error);
    });
  },
}

Answer 1

您正在使用常规函数作为回调，这意味着this引用发生了变化。您需要在此处使用箭头功能。() => {}。

 axios.get('/api/posts')
    .then((response) => {
      this.posts = response.data;
    })
    .catch((error) => {
      console.log(error);
    });