Vue2 Objekt nicht

Question

gefasst

Ich versuche Liste von Daten vom Server zu erhalten und zeigen, aber sieht aus wie Vue kein neue Daten sehen (sie nicht reaktiv machen)

 Vue.component('Videos', { 
      template: 
       ` 
       <div> 
        <div v-for="video in videos" v-text="video.name"> 
        </div> 
       <div> 
      `, 
      data() { 
       return { 
        videos: {}, 
       } 
      }, 
      methods: { 
       getVideos() { 
        axios.get('/admin/videos?token='+localStorage.getItem('auth_token')) 
         .then(function(response) { 
          this.videos = response.data.videos; 
         }).catch(function(errors){ 
          this.error = errors.data; 
        }) 
       }, 
      }, 
      created: function() { 
       this.getVideos(); 
      } 

     }); 

    new Vue({ 
     el: "#app", 
}); 

Auch ich versuche

zu verwenden

Object.keys(response.data.videos).forEach( key => this.$set(this.videos, key, response.data.videos[key]) );

und this.videos = Object.assign({}, this.videos, response.data.videos)

aber es ist immer noch nicht für mich arbeiten. Danke fürs Helfen!

Answer 1

Sie verlieren den Kontext sowohl in then als auch in catch Callbacks. Als Ergebnis setzen Sie window.videos Variable (global) statt Ihrer Komponenteninstanz videos Eigenschaft (gleich mit error).

Einfach fix ist arrow functions zu verwenden, die lexikalische Bindung erhalten:

methods: { 
    getVideos() { 
     axios.get('/admin/videos?token='+localStorage.getItem('auth_token')) 
      .then(response => { 
       this.videos = response.data.videos; 
      }).catch(errors => { 
       this.error = errors.data; 
     }) 
    }, 
},