TypeError: 정의되지 않은 Vuejs의 속성 'posts'를 설정할 수 없음

TypeError: 정의되지 않은 Vuejs의 속성 'posts'를 설정할 수 없음

나는 VueJs와 Laravel로 SPA를 만든다.홈페이지에서 api laravel과 acxio response를 통해 모든 게시물을 얻는데 데이터 오브젝트가 있었다.그러나 나는 게시물을 업데이트 할 수 없다.

• 크롬 디버그 도구 오류:

웰컴에 있는 내 암호.부에를 하다

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);
    });
  },
}

당신은 콜백으로 정규 함수를 사용하고 있다.this참조 변경여기서는 화살표 기능을 사용해야 한다.() => {}.

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

우선 당신이 정의한 것posts당신의 소품 소유지에.어린이 구성품에서 소품을 변이해서는 안 된다.소품은 단방향-데이터 흐름

초기화할 수 있음posts다음과 같은 데이터 속성:

data(){
    return{
        posts: null
    }
}  

그런 다음 API를 통해 데이터를 가져와 할당하면 된다.posts자료의 속성에 있어서.

this그대 속에then함수는 vue 인스턴스를 가리키지 않는다.그래서 이렇게 하는 게 더 낫겠다.

 created () {
     var vm = this;
    axios.get('/api/posts')
    .then(function (response) {
      vm.posts = response.data;
    })
    .catch(function (error) {
      console.log(error);
    });
  },
} 

아니면 그대 an => 이런 함수

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

참조URL: https://stackoverflow.com/questions/44342112/typeerror-cannot-set-property-posts-of-undefined-vuejs