VueJS does not update DOM after fetch data from API?

Question

I am trying to create an example about the list of photos and I see a trouble when binding data to the component after call API.

JS code:

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

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

After fetching all photos from API and as my understand then the variable photos will auto binding and VueJS will update DOM.

VueJs 2.1.6

Any help.

Thanks!

Helping hand · Accepted Answer · 2018-08-11 09:49:55Z

14

Issue is with your this value inside function() which has this value scoped to axios instead of vue instance . or you can use (response)=> to use this directly

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

answered Aug 11, 2018 at 9:49

Helping hand

2,9602 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dangchithao Over a year ago

Ahhhhhh...yeah, that great, so basic :D, thank you @Helping hand, close my issue :D

Azamat Over a year ago

It works but gives this error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

Max Martynov · Accepted Answer · 2018-08-11 09:59:10Z

Your code is not correct.

Problems:

It will be better to define used components for each component, like components: {photoItem}.
In your axios callback you use function and that means, that you use wrong context inside (this.photos). Use arrow function (() => {}) instead of the function () {}
The directive v-for requires directive :key=""

I've fixed it below.

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

Collectives™ on Stack Overflow

VueJS does not update DOM after fetch data from API?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related