API에서 데이터를 가져온 후 VueJ가 DOM을 업데이트하지 않습니까?

API에서 데이터를 가져온 후 VueJ가 DOM을 업데이트하지 않습니까?

사진 목록에 대한 예시를 작성하려고 하는데 API 호출 후 컴포넌트에 데이터를 바인딩할 때 문제가 발생하였습니다.

JS 코드:

<script>
// photo item
Vue.component('photo-item', {
   props: ['photo'],
   template: `<li>{{ photo.name }}</li>`
});

// List of photos
Vue.component('photo-list', {
   props: ['photos'],

   template: `
   <ul id="photo-list">
      <photo-item v-for="photo in photos" :photo="photo"></photo-item>
   </ul>`
});

new Vue({
   el: "#photo_detail",
   data: {
      photos: []
   },

   created: function() {
      axios
       .get('/api/photos')
       .then(function (response) {
           this.photos = response.data; // Data existed
       })
       .catch(function (err) {
           console.log(err);
       });
   }
 })
 </script>

HTML 코드

<main id="photo_detail">
    <photo-list v-for="photo in photos" :photo="photo"></photo-list>
</main>

API에서 모든 사진을 가져온 후, 그리고 내가 알기로는photos자동 바인딩 및 VueJ가 DOM을 업데이트합니다.

VueJs 2.1.6

도움이 필요하시면 됩니다.

감사합니다!

문제는 고객님의this내면의 가치function()이 값의 범위는 다음과 같습니다.axiosvue 인스턴스 대신 또는 를 사용할 수 있습니다.(response)=>사용하다this직접적으로

new Vue({
   el: "#photo_detail",
   data: {
      photos: []
   },

   created: function() {
      var self=this;
      axios
       .get('/api/photos')
       .then(function (response) {
           self.photos = response.data; // Data existed
       })
       .catch(function (err) {
           console.log(err);
       });
   }
 })

코드가 올바르지 않습니다.

문제:

1. 각 컴포넌트에 대해 사용한 컴포넌트를 정의하는 것이 좋습니다.components: {photoItem}.
2. Axios에서 사용하는 콜백function즉, 내부에서 잘못된 콘텍스트를 사용하고 있습니다(this.photos화살표 기능을 사용합니다( ).() => {}() 대신function () {}
3. 지시문v-for지시문 필요:key=""

아래에 수정했습니다.

// photo item
const photoItem = Vue.component('photo-item', {
   props: ['photo'],
   template: `<li>{{ photo.name }}</li>`
});

// List of photos
const photoList = Vue.component('photo-list', {

  // define used components
  components: {photoItem},
  props: ['photos'],
  template: `
   <ul id="photo-list">

      <!-- add :key="" directive -->
      <photo-item v-for="(photo, index) in photos" :key="index" :photo="photo"></photo-item>
   </ul>`
});


new Vue({
   el: "#photo_detail",

   // define used components
   components: {photoList},
   data: {
      photos: []
   },

   created: function() {

      // axios.get('/api/photos')
      // use arrow function
      setTimeout(() => {
		this.photos = [{name: 'Photo 1'}, {name: 'Photo 2'}];
      }, 1000);
   }
 })

<script src="https://unpkg.com/vue"></script>

<main id="photo_detail">
  <photo-list :photos="photos"></photo-list>
</main>

언급URL : https://stackoverflow.com/questions/51798345/vuejs-does-not-update-dom-after-fetch-data-from-api