Vue.js 단일 파일 구성 요소의 데이터 가져오기

Vue.js 단일 파일 구성 요소의 데이터 가져오기

내 데이터 가져오기는 전역적으로 사용될 때 잘 작동하지만, 단일 파일 구성 요소에 고착되면 항목을 반환하지 않는다.내가 뭘 잘못하고 있지?

국자 편찬부에를 하다

<template>
<div>
  <ul v-for="item in items">
    <li>
      {{item.title}}
    </li>
  </ul>
</div>
</template>

<script>
export default {
  components: {'tiny-slider': VueTinySlider},
  name: 'ladeditems',
  data: {
    items: null
  },
  methods: {
    fetchData: function () {
      let self = this
      const myRequest = new Request('https://jsonplaceholder.typicode.com/posts')

      fetch(myRequest)
        .then((response) => { return response.json() })
        .then((data) => {
          self.items = data
          // console.log(self.items)
        }).catch( error => { console.log(error); });
    }
  },

  mounted() {
    this.fetchData()
  }
}
</script>

당신의data선언은 부정확하며 다음과 같아야 한다.

data: function () {
  return {
    items: null
  }
}

이 정보는 여기 있다: 데이터.요컨대 그것은 물체를 반환하는 함수여야 한다.이것은 당신의 변화에 반응하는 속성을 허용해야 한다.

또한 주목할 필요가 있다.fetch네가 제공한 코드로 선언된 게 아니니까 아마 글로벌 선언인 것 같아.그렇지 않고 혼합물이라면, 당신은 그것을 관찰할 필요가 있을 것이다.this.fetch(...)

https://vuejs.org/v2/api/#data

구성요소를 정의할 때는 데이터를 초기 데이터 객체를 반환하는 함수로 선언해야 하는데, 이는 동일한 정의를 사용하여 생성되는 인스턴스가 많기 때문이다.만약 우리가 데이터에 대해 일반 객체를 사용한다면, 동일한 객체는 생성된 모든 인스턴스에서 참조로 공유될 것이다!데이터 함수를 제공함으로써 새로운 인스턴스가 생성될 때마다 초기 데이터의 새로운 복사본을 반환하도록 호출할 수 있다.

참조URL: https://stackoverflow.com/questions/47864361/data-fetch-in-vue-js-single-file-component