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

Question

전역 적으로 데이터를 가져올 때 내 데이터 가져 오기가 올바르게 작동하지만 한 번만 구성하면 구성 요소가 항목을 반환하지 않습니다. 내가 뭘 잘못하고있어?

ladeditems.vue

<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> 

Answer 1

,이 같아야합니다

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

이 정보는 여기에 있습니다 : data. 즉, 객체를 반환하는 함수 여야합니다. 이 속성을 사용하면 변경 내용에 대한 반응을 볼 수 있습니다.

fetch은 제공된 코드에서 선언되지 않으므로 전역 선언이라고 생각합니다. 그렇지 않고 믹스 인 경우 범위를 지정해야합니다. this.fetch(...)

Answer 2

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

구성 요소를 정의 할 때 사용하여 만든 많은 경우가있을 수 있기 때문에, 데이터, 초기 데이터 객체를 반환하는 함수로 선언해야합니다 같은 정의. 데이터에 일반 객체를 사용하면 생성 된 모든 인스턴스에서 동일한 객체가 참조로 공유됩니다! 데이터 함수를 제공함으로써, 새로운 인스턴스가 생성 될 때마다 그것을 호출하여 초기 데이터의 새로운 복사본을 반환 할 수 있습니다. 귀하의 data 선언이 잘못